Floated Elements

Float Basics

Smashing Magazine has a very good article on how floats work.

This box has been floated and with margin:0;

The experiment is to find out what happens with surrounding text.

This is a standard paragraph. Notice how this line of text is not on the same horizon as the first line of text in the green box. It's a common problem, solved by adding some top padding to this paragraph. e.g. <p style="padding-top:.8em">

This box has been floated and with margin:0;

The experiment is to find out what happens with surrounding text.

The bottom line: The easiest way to push things away from a floated item is to add some margin to the floated element. Other hacks are to add some left margin to the non-floated content that is >= to the float’s width (like the last example) or to place another floated container next to it.

Now that we’ve fixed this line's alignment, it is time to turn our attention to spacing it away from the floated element. I made the background of this paragraph black to show that it actually starts, not flush with the right side of the green box, but rather all the way on the left side of the page.

This one has margin-left:50px;

This one has padding-left:50px;

This one has margin-left:365px;

This box has been floated and it has margin:1em 1em 0 0;

This experiment is to find out what happens with surrounding lists.

Pay attention to the location of the list marker (bullet).

Standard text is now pushed away from the float, but content with negative margins or list markers can give you issues.

You can see that the bullet looks to be a bit close to the floated item. Typically you will see the bullets flush with, say the text directly above this list, or even inset some more.
From the previous experiments above, we can see that margin and padding are ignored for elements around a floated item, so what are we to do?
Take a look at the Lists page for the solution.

Clearfix

The clearfix hack is used to fix the problem shown below.

This is a floated area inside of a non-floated div. Life is good if this content is shorter than the other content (in the yellow area). However, when this floated content is taller, this box sticks out below the containing div.

This paragraph is inside the containing, non-floated div. Notice how the floated box is sticking out below the containing div. Use the ClearFix hack to resolve this problem.

In the example above, the page structure is:

<div style="background-color:lemonChiffon; border: medium solid hotpink"> <!-- non-floated DIV -->
	<article style="float:left; background-color:lawnGreen; width:250px;">
		<p>This is a floated area inside…</p>
	</article>
	<p>This paragraph is inside the containing, non-floated…</p>
</div>

To fix it, apply class "clearfix" to the containing div. The CSS for clearfix is:

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

After the clearfix hack is applied, the float is “contained” as demonstrated below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis sem ut ipsum volutpat feugiat a nec nisl. Phasellus tincidunt elit eget mauris tempus tristique vitae id magna. Nulla sit amet tortor nisi, sit amet congue justo. Aenean pretium sodales quam.

This paragraph is inside the containing, non-floated div. Now that clearfix has been applied, you can see that the yellow background from the containing div wraps all the content inside the div.

<div class="clearfix" style="background-color:lemonChiffon; border: medium solid hotpink">
	<article style="float:left; background-color:lawnGreen; width:250px;">
		<p>Lorem ipsum dolor sit amet...</p>
	</article>
	<p>This paragraph is inside the containing, non-floated...</p>
</div>