layout not floating properly

**cass27** · Sep 30, 2007 13:44

Hi, I am trying to set up the basic layout of my page using float. Everything seems to work except the main body will not appear next to the left vertical menu and instead appears at the bottom of it. The html is:

<body>
<div id="wrapper"><div id="banner"></div><div id="nav"></div><div id="main"></div>
<div id="footer"></div></div>
</body>
</html>

And the Css is:

body{margin:0; padding:0;}

#wrapper{width:800px; height:750px; border:#0033CC; border-width:thin; border-style:groove;
}

#banner{float:left;width:800px; height:120px; border:#990033; margin-top:5px; margin-left:5px; border-width:thin; border-style:groove; background-image: url(../elsculpts.jpg);
}
#nav{clear:left; width:200px; height:450px; margin-top:5px; margin-left:5px; border-width:thin; border-style:groove; border:#00CC33; background:#FFFFFF url(../gradpole.jpg) no-repeat;
}
#main{float:left; width:450px; height:450px; margin-left:5px; margin-top:5px;border-width:thin; border-style:groove; border:#00CC33; background-color:#99CC00;
}
#footer{clear:both; width:800px; height:100px; margin-top:5px; margin-left:5px; border-width:thin; border-style:groove; border:#00CC33; background-color:#00FFCC; margin-top:5px;

}

any ideas how i can rectify this?

thanks for your time

onwards and upwards

cass27

**Paul O'B** · Sep 30, 2007 14:53

Hi,

You haven't floated the #nav which means that #main will start underneath. You need to float the #nav as well.

Code:

#nav{float:left;}

It is unlikely that setting a height on those elements is going to be any use for you because that will restrict the layout to always being that high. You should let content dictate the height instead.

**cass27** · Oct 1, 2007 01:50

Originally Posted by Paul O'B

Hi,

You haven't floated the #nav which means that #main will start underneath. You need to float the #nav as well.

thanks this works. What confuses me is why i did not need to use clear for #nav so it started on the next line? I suppose as there was no room on the previous line it would automatically start on the next line anyway. (im getting good at this, im finding my own answer before I've finished asking the question

)

cass27

**Paul O'B** · Oct 1, 2007 02:59

did not need to use clear for #nav so it started on the next line? I suppose as there was no room on the previous line it would automatically start on the next line anyway.

You got it

Floats will fill the space available and if there is no room then they will try and find space underneath. (This can be a problem in IE when it will drop floats in a fluid layout even when there is no underneath.)

**osgood** · Oct 1, 2007 03:37

As an aside note there's really no need to float your 'banner' <div> or give it a width.

A child container will extend the full width of its parent container. So if that's what you require then no need to declare a width.

Also the only time you should be giving your containers a height is when you know what height they will be. At this stage I can't be sure what it is you are doing but generally speaking don't use height to control the depth of your design, let the content itself do that.

The word' 'banner' for a <div> isn't such a great idea as Nortons security may attempt to block it form view.

**cass27** · Oct 1, 2007 04:16

Originally Posted by osgood

Also the only time you should be giving your containers a height is when you know what height they will be. At this stage I can't be sure what it is you are doing but generally speaking don't use height to control the depth of your design, let the content itself do that..

Osgood and Paul o'b: You will be glad to know that i have taken the height out of the structure. I can see how this can be useful. the only downside to this the footer div collapses completely and can hardly be seen (even though it has a background color. I think for the future placing content in such divs will be useful

Originally Posted by osgood

A child container will extend the full width of its parent container. So if that's what you require then no need to declare a width..

really useful imfo again. Im getting the hang of how it works now.

Originally Posted by osgood

The word' 'banner' for a <div> isn't such a great idea as Nortons security may attempt to block it form view.
.

this is going to change the habit of a lifetime. Header i guess is just as good.

I think i can safely say im floating without armbands now,

User Tag List

Thread: layout not floating properly

Thread Tools

Display

layout not floating properly

Bookmarks

Bookmarks

Posting Permissions