Extending the background around two floating div’s

Extending the background around two floating div’s

Many beginner’s to web design and hand coding find the issue of floats rather complicated. The most common problem is when the background of your design doesn’t extend around the content. This Tips and Trick shows you how to clear floats and wrap content.

By Karinne Legault on December 4th, 2008 in Tips & Tricks | Print This Article

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.

clearing floats 1 Extending the background around two floating divs

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">
<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;
    overflow: hidden;
}
#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>

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:

clearing floats 2 Extending the background around two floating divs

Did you like it?

Help us spread the word!
  • Float it!
  • Digg it!
  • Stumble it!
  • Bookmark it!
Similar Posts

About The Author

Karinne Legault
Karinne Legault
Karinne Legault has 10 years of experience in the Web Design industry. You can see her portfolio at karinnelegault.com and her blog at karinne.net.

Comments

  1. Gravatar Icon
    Michael Plant said :
    December 22nd, 2008 at 8:00 pm

    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

  2. Gravatar Icon
    fedexx said :
    January 28th, 2009 at 11:16 am

    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!

  3. Gravatar Icon
    Mohsen.H said :
    April 8th, 2009 at 8:25 am

    Thanks a lot, it really saved my time.

Toggle Trackbacks

Do you have something to say?

Live Comment Preview

Anti-Spam Quiz: