Clearing floats

Here's a common problem - a parent div doesn't wrap itself around floated elements.

wineWhen elements are floated, they are taken out of the natural flow of the document. Other elements are supposed to flow around them. This is very useful for things like adding a picture to some text, like here. This image is embedded in this paragraph and floated right.

If a container div only has two floated elements, we're left with no actual content in the flow, so the borders of the container collapse in on itself and we get a thick line like this :

float : left

float : right

The problem usually looks more like this though :

Image here

People expect a box to wrap itself around a picture, but it doesn't...

overflow:auto

This can sometimes be fixed by simply adding 'overflow:auto' to the parent div. This works for Firefox, but maybe not in IE...(I'd test it out - if it works, then it's good - very quick and easy).

float : left

float : right

overflow:auto;

There are other ways to fix this problem that add content...

A clearing div

If we insert a div just before the closing tag of the container div with 'clear:both' it will make sure there's nothing to its left or right and so place itself below the floated elements.

This div also needs some height due to a strange thing in IE called 'haslayout'. If a div has no height (and no content) it is ignored. So, the clearing div has 'height:1px'. Setting 'margin-top:-1px" will counteract that.

The overflow : hidden is for IE because it won't render an element less than the current font-size/line-height. Setting overflow : hidden reduces the height to 1px as per other browsers and therefore does not interfere with anything else.

(Paul O'Brien - the man who knows these things).

.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}

Just before the closing tag of the parent div. :<div class="clear"></div>

:after + content {}

Here's another way of clearing divs. This was written by Tony Aslett and modified by the people at P.I.E.. This applies the float clearing to the parent div by adding content using :after. IE (being a bit stupid) doesn't know about this, but that's OK, because it contains the child elements anyway.

The good thing about this method is that there are no empty divs - just a class name.

float : left

float : right

Float the parents

One more way to do this is by floating the parent div. If you want the div to be 100%-width, this will work well - otherwise, you may have problems with this as you may not actually want the div to float left. The point is that a floated parent will contain floated children.

CSS
#floats div.wrapper {
border:1px solid #666666;
background-color:white;
position:relative;
}
#floats div.div1, #floats div.div2 {
width:200px; height:100px;
}
#floats div.div1 {
border:1px solid red; float:left;
}
#floats div.div2 {
border:1px solid blue; float:right;
}

#floats div#overflow {
overflow:auto;
}
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
.cfix:after {
content: ".";
display: block;
height: 0;
overflow:hidden;
clear: both;
visibility: hidden;
}

.cfix {display: inline-table;}

/* Hides from IE-mac \*/
.cfix {height:1px;}
/* End hide from IE-mac */
HTML
<div id="floats" class="cfix">
<h1>Clearing floats</h1>
<p>Here's a common problem - a parent div doesn't wrap itself around
floated elements.</p>
<p><img class="fright" src="wine.jpg" width="50" height="50" alt="wine" />When elements are floated, they are taken out of the natural flow of the document. Other elements are supposed to
flow around them. This is very useful for things like adding a picture to some text, like here. This image is embedded in this paragraph and floated right.</p>
<p>If a container div only has two floated elements, we're left with no actual content in the flow, so the borders
of the container collapse in on itself and we get a thick line like this :</p>

<div class="wrapper">
<div class="div1">
<p>float : left</p>
</div>
<div class="div2">
<p>float : right</p>
</div>
</div>
<div class="clear"></div>
<p>The problem usually looks more like this though :</p>
<div class="wrapper">
<div class="div1">
<p>Image here</p>
</div>

People expect a box to wrap itself around a picture, but it doesn't...
</div>
<div class="clear"></div>
<h3>overflow:auto</h3>
<p>This can sometimes be fixed by simply adding 'overflow:auto' to the parent div. This works for Firefox, but maybe not in IE...(I'd test it out - if it works, then it's good - very quick and easy).</p>
<div id="overflow" class="wrapper">
<div class="div1">
<p>float : left</p>
</div>
<div class="div2">
<p>float : right</p>
</div>
overflow:auto;
</div>
<p>There are other ways to fix this problem that add content...</p>
<h3>A clearing div</h3>
<p> If we insert a div just before the closing tag of the
container div with 'clear:both' it will make sure there's nothing to its left or right and so place itself below
the floated elements.</p>
<p>This div also needs some height due to a strange thing in IE called 'haslayout'. If a div has no height (and no content)
it is ignored. So, the clearing div has 'height:1px'. Setting 'margin-top:-1px" will counteract that.</p>
<div id="paulquote">
<q>
The overflow : hidden is for IE because it won't render an element less than the current font-size/line-height.
Setting overflow : hidden reduces the height to 1px as per other browsers and therefore does not interfere with anything else.</q>
<p><i>(<a href="http://pmob.co.uk/">Paul O'Brien</a> - the man who knows these things).</i></p>
</div>
<div class="wrapper">
<div class="div1">
.clear {<br />
clear:both;<br />
margin-top:-1px;<br />
height:1px;<br />
overflow:hidden;<br />
}
</div>
<div class="div2">
<p>Just before the closing tag of the parent div. :&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;</p>
</div>
<div class="clear"></div>
</div>
<h3>:after + content {}</h3>
<p>Here's another way of clearing divs. This was written by
<a href="http://www.csscreator.com/attributes/containedfloat.php">Tony Aslett</a>
and modified by the people at <a href="http://www.positioniseverything.net/easyclearing.html">P.I.E.</a>. This applies the float clearing to the parent div
by adding content using <strong>:after</strong>. IE (being a bit stupid)
doesn't know about this, but that's OK, because it contains the child elements anyway.</p>
<p>The good thing about this method is that there are no empty divs - just a class name.</p>
<div class="wrapper cfix">
<div class="div1">
<p>float : left</p>
</div>
<div class="div2">
<p>float : right</p>
</div>
</div>
<div id="float-float">
<h3>Float the parents</h3>
<p>One more way to do this is by floating the parent div. If you want the div to be 100%-width, this will work well - otherwise, you may have problems with this as you may not actually want the div to float left. The point is that a floated parent will contain floated children.</p>
</div>
</div>

Comments

#1
2008-08-23 Omar Al-Dolaimy says :

Thanx it's too useful smile
especially the overflow option!. it explains lots of things smile.

#2
2008-10-15 Tiger says :

Thanx lot...

clear explaination......smile

#3
2008-11-07 Amy says :

Brilliant! Thank you so much!

#4
2010-01-01 Mustafa says :

Thanks, that is what I have been searching for 1 hour...

#5
2011-05-28 eve isk says :


I've finally found a normal presentation on this issue. Thank you.

#6
2017-07-25 OneEskNineteen says :

Only clear solutions with explanations I found. Thank you.

#7
2017-07-25 BonRouge says :

@OneEskNineteen
Is this for real? I get tons of spam on these pages, so...
If this has really helped you, I'm very happy. As you can see, I wrote it 9 years ago, and not many people look at this site anymore, because it's a static museum type thing, but, as I said, if you've found it helpful, I'm very happy. (Cue the flood of spam...)

Comment form

Please type the word 'gorilla' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url