This is a common problem with Float-based layouts. The float’s container doesn’t want to “stretch” to accommodate the floating divs.
Likely you have something like this where the background of the content area should be white.
It’s there in your code but for some reason it’s just not showing up properly in your browser. Here’s the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Clearing floats</title>
<meta http-equiv="Content-Type" content="text/html charset=iso-8859-1">
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #333;
}
#container {
width: 800px;
background: #fff;
margin: 0 auto;
}
#content {
float: left;
width: 500px;
margin: 10px;
}
#side {
float: right;
width: 200px;
margin: 10px;
}
</style>
</meta></head>
<body>
<div id="container">
<div id="content">
<h2>Some title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum. Duis accumsan dignissim ligula. Donec euismod sodales nisi. Quisque faucibus ipsum ut felis. In posuere. Suspendisse potenti. Aliquam ligula nisl, scelerisque a, placerat in, sollicitudin vitae, mauris. Aenean laoreet pretium lacus. Integer sollicitudin, nisi in auctor elementum, dolor pede scelerisque libero, non pulvinar sem augue vitae odio. Vivamus blandit malesuada enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec adipiscing mauris nec tellus. In hac habitasse platea dictumst. Nunc ullamcorper fermentum est. Ut vel urna. Nam sapien felis, commodo eget, consequat ac, vulputate sed, magna. Sed placerat, turpis ut feugiat varius, odio magna pulvinar turpis, interdum posuere elit pede quis urna. Curabitur et dolor. Aenean sed ante vel nunc pulvinar vulputate. Cras posuere varius arcu. Etiam aliquet tincidunt pede. Donec ac odio. Nunc ipsum sapien, posuere at, placerat et, eleifend et, mi. In sagittis nisi eget arcu. Nunc nisl sapien, varius quis, porta nec, venenatis id, elit. Nullam quam. Fusce in erat. Donec nunc ligula, blandit eu, ultricies sed, pulvinar viverra, tellus. Fusce nulla lacus, volutpat vel, mollis ut, tristique non, odio.</p>
<p>Ut arcu. Donec luctus placerat lorem. Aenean rutrum. Suspendisse id tortor auctor nisi vulputate molestie. Duis porta. Sed vel ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, leo ac condimentum tristique, nulla justo molestie lorem, vel volutpat pede neque vel eros. Nam in eros. Sed nec lacus eu dui volutpat mollis. Quisque sapien nunc, luctus ut, malesuada ut, sagittis rutrum, turpis. Curabitur auctor. Praesent volutpat lectus nec tortor. Sed nibh nulla, dictum sit amet, tempor non, sollicitudin scelerisque, urna. Nam leo felis, porttitor at, lobortis non, ornare ut, metus. Donec eu justo. Sed eu diam. Integer eu mauris a purus lacinia pulvinar.</p>
</div>
<div id="side;>
<h3>Categories</h3>
<ul>
<li><a href="">Web Design</a></li>
<li><a href="">Web Development</a></li>
<li><a href="">Search Engine Optimization</a></li>
<li><a href="">Hosting</a></li>
</ul>
</div>
</div>
</body>
</html>
The cure?
There are 2 cures actually. One is adding the overflow: hidden property to the container. And the other is adding a “clearing” div.
Here is a basic example with the overflow property in use:
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Clearing floats
<!-- body { margin: 0; padding: 0; background: #333; } #container { width: 800px; background: #fff; margin: 0 auto; overflow: hidden; } #content { float: left; width: 500px; margin: 10px; } #side { float: right; width: 200px; margin: 10px; } -->
<div id="container">
<div id="content">
<h2>Some title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum. Duis accumsan dignissim ligula. Donec euismod sodales nisi. Quisque faucibus ipsum ut felis. In posuere. Suspendisse potenti. Aliquam ligula nisl, scelerisque a, placerat in, sollicitudin vitae, mauris. Aenean laoreet pretium lacus. Integer sollicitudin, nisi in auctor elementum, dolor pede scelerisque libero, non pulvinar sem augue vitae odio. Vivamus blandit malesuada enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec adipiscing mauris nec tellus. In hac habitasse platea dictumst. Nunc ullamcorper fermentum est. Ut vel urna. Nam sapien felis, commodo eget, consequat ac, vulputate sed, magna. Sed placerat, turpis ut feugiat varius, odio magna pulvinar turpis, interdum posuere elit pede quis urna. Curabitur et dolor. Aenean sed ante vel nunc pulvinar vulputate. Cras posuere varius arcu. Etiam aliquet tincidunt pede. Donec ac odio. Nunc ipsum sapien, posuere at, placerat et, eleifend et, mi. In sagittis nisi eget arcu. Nunc nisl sapien, varius quis, porta nec, venenatis id, elit. Nullam quam. Fusce in erat. Donec nunc ligula, blandit eu, ultricies sed, pulvinar viverra, tellus. Fusce nulla lacus, volutpat vel, mollis ut, tristique non, odio.</p>
<p>Ut arcu. Donec luctus placerat lorem. Aenean rutrum. Suspendisse id tortor auctor nisi vulputate molestie. Duis porta. Sed vel ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, leo ac condimentum tristique, nulla justo molestie lorem, vel volutpat pede neque vel eros. Nam in eros. Sed nec lacus eu dui volutpat mollis. Quisque sapien nunc, luctus ut, malesuada ut, sagittis rutrum, turpis. Curabitur auctor. Praesent volutpat lectus nec tortor. Sed nibh nulla, dictum sit amet, tempor non, sollicitudin scelerisque, urna. Nam leo felis, porttitor at, lobortis non, ornare ut, metus. Donec eu justo. Sed eu diam. Integer eu mauris a purus lacinia pulvinar.</p>
</div>
<div id="side">
<h3>Categories</h3>
<ul><li&><a href="">Web Design</a></li>
<li><a href="">Web Development</a></li>
<li><a href="">Search Engine Optimization</a></li>
<li><a href="">Hosting</a></li>
</ul>
</div>
</div>
</body>
</html>
And here is an example with a “clearing” div.
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Clearing floats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #333;
}
.clear {
clear: both;
}
#container {
width: 800px;
background: #fff;
margin: 0 auto;
}
#content {
float: left;
width: 500px;
margin: 10px;
}
#side {
float: right;
width: 200px;
margin: 10px;
}
</style>
</meta></head>
<body>
<div id="container">
<div id="content">
<h2>Some title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum. Duis accumsan dignissim ligula. Donec euismod sodales nisi. Quisque faucibus ipsum ut felis. In posuere. Suspendisse potenti. Aliquam ligula nisl, scelerisque a, placerat in, sollicitudin vitae, mauris. Aenean laoreet pretium lacus. Integer sollicitudin, nisi in auctor elementum, dolor pede scelerisque libero, non pulvinar sem augue vitae odio. Vivamus blandit malesuada enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec adipiscing mauris nec tellus. In hac habitasse platea dictumst. Nunc ullamcorper fermentum est. Ut vel urna. Nam sapien felis, commodo eget, consequat ac, vulputate sed, magna. Sed placerat, turpis ut feugiat varius, odio magna pulvinar turpis, interdum posuere elit pede quis urna. Curabitur et dolor. Aenean sed ante vel nunc pulvinar vulputate. Cras posuere varius arcu. Etiam aliquet tincidunt pede. Donec ac odio. Nunc ipsum sapien, posuere at, placerat et, eleifend et, mi. In sagittis nisi eget arcu. Nunc nisl sapien, varius quis, porta nec, venenatis id, elit. Nullam quam. Fusce in erat. Donec nunc ligula, blandit eu, ultricies sed, pulvinar viverra, tellus. Fusce nulla lacus, volutpat vel, mollis ut, tristique non, odio.</p>
<p>Ut arcu. Donec luctus placerat lorem. Aenean rutrum. Suspendisse id tortor auctor nisi vulputate molestie. Duis porta. Sed vel ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, leo ac condimentum tristique, nulla justo molestie lorem, vel volutpat pede neque vel eros. Nam in eros. Sed nec lacus eu dui volutpat mollis. Quisque sapien nunc, luctus ut, malesuada ut, sagittis rutrum, turpis. Curabitur auctor. Praesent volutpat lectus nec tortor. Sed nibh nulla, dictum sit amet, tempor non, sollicitudin scelerisque, urna. Nam leo felis, porttitor at, lobortis non, ornare ut, metus. Donec eu justo. Sed eu diam. Integer eu mauris a purus lacinia pulvinar.</p>
</div>
<div id="side">
<h3>Categories</h3>
<ul>
<li><a href="">Web Design</a></li>
<li><a href="">Web Development</a></li>
<li><a href="">Search Engine Optimization</a></li>
<li><a href="">Hosting</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Both will give you the same result:
Great tips Karinne!
I just started using overflow set to auto to self clear containers… it was there all along, I kicked myself. I use a “third cure” by floating the container div. Though, in this instance it wouldn’t be helpful without an extra div to center.
Also, I make a habit of always following a float with display:inline to keep the dreadful IE6 from doubling my margins.
Keep it up!
-Mike
Karinne! thx lot, i was just starting to get a little angry about the divs, and finally decided to check out the forums! always posting useful things ! thx again! i’m gonna check out your portfolio
have a nice day!
Thanks a lot, it really saved my time.
HHHEEYYy Karinne!!! I was really pulling my hair over this one.. and i had finnaly decided to move back to tables as i am migrating from tables to css and then i saw thi page thanks alloooootttt…..
@Achin – Oh! Glad I could save you from that table-layout mayhem
Thx a lot!
its a great solution
Thanks for the tutorial.
I’m learning this stuff from scratch, and your website helps A LOT!
Wanted to ask: am i doing something wrong, or are the two repaired code samples above not producing the webpage as it should when cutting and pasting the HTML into a blank document?
Photoshopped Image Killer can detect various settings that were used in the digital camera in taking the photo, and also compares an image against a large number of compression signatures. PSKiller resports whether image comes from digital camera directly or from Photoshop. This is extremely useful when you have some suspiciouly edited images.