SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: CSS float issue.
-
Oct 5, 2007, 16:04 #1
- Join Date
- Jul 2005
- Location
- Israel
- Posts
- 684
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
CSS float issue.
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!
-
Oct 5, 2007, 16:48 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
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:
Code:<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>
-
Oct 5, 2007, 16:58 #3
- Join Date
- Jul 2005
- Location
- Israel
- Posts
- 684
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
So simple and so effective. I love ya!
Thanks a bunch.
- Tomer
Bookmarks