CODEWITHSUNDEEP
htmlcssfluid-layout
elmify
elmify

Reputation: 105

fluid layout positioning divs

This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn't, also I'd like to make my content height flexible because it's for a dynamic web app so the footer should be positioned below it accordingly. Ok so here's the mockup of what id like to achieve enter image description here

<body>

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">My account</a></li> 
    <li><a href="">Help</a></li> 
    <li><a href="">Contact Us</a> </li> 
    </ul>

</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">

</div>
<div id="footer">
<p>&copy; TEST</p>
</div>
</body>
</html>

here's my css code:

body{
width: 90%;
margin: 0 auto;}

#content {
overflow: auto;
height: 29em;}

#header{
height: 60px;
overflow: hidden;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#personalised p {
float: left;
width: 20%;
margin-top:5%;}

#navigation{
margin: 1%;}

#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}

div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }

#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}

I know this is long, but I'd really appreciate your help. Thanks in advance

Upvotes: 1

Views: 800

Answers (2)

teynon
teynon

Reputation: 8298

Try working on your formatting first. (It's not too bad, but can use improvement.) That's one of the biggest benefits to you is code that you can read. You can look through what I've done here and play with what you like. http://jsfiddle.net/mPH8X/

<head>
<style>
div {
 border: 1px dashed #FF0000;
}
body {
    margin: 0px;
    padding: 0px;
}

.clear {
    clear: both;
}

#header {
    min-height: 60px;
    overflow: hidden;
    margin: 1%;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#navigation{
    margin: 1%;
    float: right;
}

#navigation ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#navigation ul li {
    margin: 0px;
    padding: 0px;
    display: block;
    position: relative;
    float: left;
}

#navigation li ul { 
    display: none; 
}

.body {
    clear: both;
}

#personalised {
    margin: 1%;
    float: left;
    width: 20%;
}

#content {
    margin: 1%;
    float; right;
    min-height: 29em;
}

#personalised p {
    margin: 0px;
    padding: 0px;
}

#header, #footer, #navigation, #personalised {

}

#footer {
    padding: 0.5em 0;
    font-family: Arial, Verdana;
    font-size: 10px;
    text-align: center;
}
</style>
<body>

<div id="header">
    <h1>LOGO</h1>
    <ul>
        <li><a href= ""> Home </a></li>
        <li><a href= ""> Logout </a></li>
    </ul>
    <div class="clear"></div>
</div>

<div id="navigation">
    <ul>
        <li><a href="">Home</a></li> 
        <li><a href="">My account</a></li> 
        <li><a href="">Help</a></li> 
        <li><a href="">Contact Us</a> </li> 
    </ul>

    <div class="clear"></div>
</div>

<div class="body">
    <div id="personalised">
        <p>Hey there</p>
        <div class="clear"></div>
    </div>

    <div id="content">

    </div>
</div>

<div id="footer">
    <p>&copy; TEST</p>
</div>
</body>
</html>

Edit: Looking at your content statement, you are looking for CSS's min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.

Upvotes: 2

Frisbetarian-Support Palestine
Frisbetarian-Support Palestine

Reputation: 1309

I think the culprit is this:

#content {
overflow: auto;
height: 29em;}

You are explicitly setting the height of the content div. Try setting it to inherit.

Here is a fiddle where the container grows according to the number of elements in it:

http://jsfiddle.net/pUb6q/2/

Uses your layout. The changes are 

#content {
    border:1px solid black;
    float: right;
    overflow: auto;
    height: inherit;
}

Upvotes: 1

Related Questions