How to Fix Problmes with CSS Float Elements in IE, FireFox, Safari, etc

You may have discovered a powerful little css attribute called “float” and have dreamed about all the different elements you can make stick to the right side of the page or containing element. Then you go to implement it and IE (or maybe even FireFox) now renders the page in an unpredictable, Picaso kind of way. Drats! Why on earth is it doing that?!

Most of these problems can be fixed with a simple css style that have been using for years.

First… Why does it happen?

The “picaso” effect with elements displaying in unpredictable manners, overlapping or getting pushed off to the side of the page, is a result of how css attribute float with assigned value of left or right are treated by the browser.  The browser ignores the height as well as top and bottom margins of the floating elements when rendering any elements following them.  Depending on your page structure and the browser you are viewing the page from, this can cause a wide array of undesirable display problems.

How do I fix it? – The Ultimate Line Break!

You’re probably already familiar with <br> (or <br /> in xhtml).  Here is a CSS enhanced version of the line break to fix many unpredictable display issues.  In fact, this has saved me in a number of places and has become a staple in most of the style sheets of practically every site I build.  It validates correctly and should not cause any extra vertical space on your page.  You can place this pretty safely anywhere and it will vertically break up whatever is above and below it so that they are on separate lines and do not overlap.   You can even use the HTML multiple times througout your page just like the old <br> tag!

The HTML:

<div class="hrClear"><hr /></div>

The CSS:

.hrClear {
width: 100%;
height: 0;
margin: 0;
padding: 0;
clear: both;
}
.hrClear hr {
width: 100%;
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}