clear: both

...when do I need it?

[Emperor]

Hi guys,

When I made my sidebar layout I had to use {clear: both} in the footer or else it was a mess.

However, I just made a simple stucture like this:

<div>
<div style="float: left;"}left text</div>
<div style="text-align: right;">right text</div>
</div>

...and it looks great (on IE6 and Firefox).

I tried 'being safe' and adding a {clear: both} just above the last </div> and I got an extra blank row. Maybe the containing (outermost) <div> should have it? Do I need it at all?

Thanks.

[createErrorMsg]

when do I need it?

You only need the clear property when you have elements following a floated element in the source code that must remain below the floated element visually on the page.

Which value to give the clear property depends entirely on the floats the clear property is clearing. If you've got an element floated left (as in your example), and you need subsequent elements to clear it, use clear:left. If the element is floated right, use clear:right. Clear:both is onlyneeded when you have bothleft and right floated elements that need to be cleared.

See also, the horse's mouth [w3.org]. ;)

Does that clear it up?

cEM

[4css]

I believe that you can just use clear:both, this way if you change positions in the layout you don't need to worry about changing the clearing.

There is also the .clearfix method [positioniseverything.net] That is supposed to be a much better way of clearing things.

[sifredi]

You also need to clear the float if you want it's parent to expand with the floated content.

This will not result in a gray background:

<div style="background: #aaa;">
<div style="float: left;">left text</div>
</div>

Where this would work:

<div style="background: #aaa;">
<div style="float: left;">left text</div>
<div style="clear: left;">&nbsp;</div>
</div>

You could also float the parent container:

<div style="background: #aaa; float: left;">
<div style="float: left;">left text</div>
</div>

with the only difference that it will then convert into an inline element.

[tomda]

I use HR to clear. Clean and net

hr.clear {display:block; height:1px; clear:left;}
hr.clear2 {display:block; height:1px; clear:left; visibility:hidden; margin-bottom:10px;}