Get a div to expand around floated content
Floated elements are a common element of many pages, and dealing with them can be a bit tricky.
The Problem
When your parent div contains a floated element that has a height greater than that of the non-floated elements in the parent div, the floated element will expand past the border of the parent div.
Here’s a simple page with this problem
Here’s the source code:
<html>
<head>
<title>
CSS Demo:
Expanding divs to surround their floated contents
</title>
<style>
div {
padding: 1em;
}
#container {
border: 1px solid black;
background-color: #ccc;
padding: 1em;
margin: 1em;
}
#floated_div {
float: left;
width: 200px;
border: 1px solid red;
}
#content_div {
width: 150px;
margin-left: 250px;
border: 1px solid blue;
}
</style>
<head>
<body>
<div id="container">
I am the container div.
<div id="floated_div">
<p>
I've got a lot of stuff in me, and will
overflow the boundaries of the container div.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Suspendisse eleifend lorem id sapien.
Nam eget odio. In
diam. In quis massa non lorem sollicitudin
pretium.
Praesent enim purus, nonummy in, varius
ut, consequat a,
nisi. Etiam at turpis. Praesent porttitor eleifend
magna.
Aliquam erat volutpat. Fusce porta blandit dui.
Suspendisse
rutrum est in urna. Nullam condimentum arcu a
nulla. Mauris
suscipit accumsan urna.
</p>
<p>
Nunc erat lacus, euismod quis, malesuada quis,
ultricies
at, tortor. Vestibulum placerat scelerisque arcu. Ut
ultrices mi ac augue. Mauris condimentum molestie
enim.
Integer sem. Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit. Nulla facilisi. Integer ac sem. Sed
ipsum
purus, mattis eget, sodales et, semper ac, sapien.
Morbi
ipsum neque, pretium at, placerat nec, sodales non,
orci.
Cras magna risus, lacinia eget, sagittis sit amet,
egestas
id, quam. Cras quis diam. Cras varius metus et est.
Aliquam
ullamcorper, massa a rutrum porttitor, tellus nibh
elementum
tortor, vitae pulvinar nulla ante eu magna. Lorem
ipsum dolor
sit amet, consectetuer adipiscing elit. Curabitur
laoreet
elit at est. Duis at libero id lorem ultricies accumsan.
Sed
gravida volutpat nibh.
</p>
<p>
Proin hendrerit accumsan arcu. Maecenas aliquam,
urna eget
ornare facilisis, justo felis ultrices enim, vel porttitor
tellus lorem a metus. Class aptent taciti sociosqu ad
litora
torquent per conubia nostra, per inceptos
hymenaeos. Nulla
ante. Suspendisse potenti. Sed feugiat imperdiet
arcu. In
tellus eros, pretium at, ultrices sed, fermentum eu,
enim.
Donec nisl mi, egestas et, malesuada at, varius quis,
nibh.
Proin dignissim mattis libero. Sed tellus quam,
dapibus eget,
mollis quis, vehicula a, massa.
</p>
</div>
<div id="content_div">
I'm an unfloated content div.
<br />
My parent div will expand to fit around me.
</div>
</div>
</body>
</html>The parent div has a background that I’d like to have extend behind the floated content, but the way it is right now, it won’t work.
The Solution
The solution is surprisingly simple. If you add a div with clear:both as it’s style just before the parent div closes, the parent div will expand to fit the floated div.
Why does it work?
When you specify clear:both as the style on an element, that element will clear all divs above it to the left and the right. This forces the clear:both div below the floating div’s lower boundary.
Since the clear:both div isn’t floated, it forces it’s parent div to expand to fit.
Chad, overflow: hidden did not solve my problem for some reason. I am trying to solve this problem in Firefox.
Tara, your solution worked seemlessly. Thank you.
— Eric Schrader Dec 31, 11:35 AM #Thanks so much.
http://capwiz.com/yo-ms/2d.html
You’ll notice that when scrolling down, the white background and the drop shadow stop (though I’m intending for them to continue). It seems as though the content (“test, test”) isn’t pushing down the containing div. You can also see where I tried to insert the clear:both div to implement your suggestion.
Any help appreciated. Thanks for considereing looking at this.
— Marshall Mar 7, 06:42 AM #Thanks a bunch for this clearly worded explanation/fix. I have been boggled by this for ages.
— Jordan Eldredge May 8, 01:48 PM #Wow, You Just Save my day! So i have done many a search in various forums and on google and i came up short so i’m lucky so solved my dilemma here! you rocK!
— Jojo Catalan Mar 23, 01:26 PM #Thanks soooo much! I was trying to come up with workarounds until I found your site!
— Steve Rolfe May 6, 09:17 PM #Thanks.. This worked and have been searching for something easy for a couple of days now.
Cheers
— SEO Vancouver Jan 30, 12:11 PM #
