CSS float issue.

[Tomer]

Hey, I'm currently redesigning my website to CSS.

Anyways, I have a header, container which holds two floating divs, content and navigation.

The general layout is this:

<div id="container" style="background-url: ('bg.gif');">
<div style="float: left; width: 100px;">Navigation</div>
<div style="float: right; width: 700px;">Content</div>
</div>

Anyway it looks good on paper, but this is what happens:




The background doesn't go all the way down and stops at the floating divs.

Can anyone help? Thanks!

[markbrown4]

You haven't cleared your floats!

Paul explains it better than I could:
http://www.search-this.com/2007/09/0...ar-about-this/

The simplest of fixes is to add a clearing div:

<div id="container" style="background-url: ('bg.gif');">
    <div style="float: left; width: 100px;">Navigation</div> 
    <div style="float: right; width: 700px;">Content</div>
    <div style="clear: both"></div>
</div>

You should move all you css to an external stylesheet also

[Tomer]

So simple and so effective. I love ya!

Thanks a bunch.
- Tomer