Do you ever use <br style='clear:both' /> or <div style='clear:both'></div> in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections:
Bad:
<div style="float:left;width:300px">left text block</div> <div style="float:right;width:300px">right text block<br> (which takes more vertical space than the left)</div> <br style='clear:both' /> Text that you need to appear below the previous text blocks
Why is it bad?
<br style='clear:both' />is bad because it introduces a blank line when you actually only want a newline. It adds vertical spacing when you don’t necessarily want it. It is using a HTML element for more than it’s specific purpose.<div style='clear:both'></div>is bad because you shouldn’t use empty HTML elements.
Better:
<div class='clearAfter'>
<div style="float:left;width:300px">left text block</div>
<div style="float:right;width:300px">right text block<br>which takes more vertical space than the left</div>
</div>
Text that you need to appear below the previous text blocks
where the clearAfter css class is defined by:
.clearAfter:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
.clearAfter {zoom:1} /*IE necessary workaround*/
I got this trick from the Yahoo! grids CSS framework – so it is a rock solid enterprise tested technique: “No matter which column is longer, the footer stays at the bottom“. Also, see http://snipplr.com/view/86/clear-floats-without-structural-markup/
What is the zoom:1 for? This is a hack needed for IE to force the element to be given a position component.
