Bluemoon Code

Often, when you use floats (What is a float?) in your design, you have to clear them, otherwise, you will find your floated elements breaking out of their container. The only catch, is that you had to add extra markup (usually a <div>, a <br />, or a <span>) to apply the clear to. Thankfully, there is now a fix for that, that just requires a bit of css, and NO EXTRA markup (excluding a bit of IE hackery).

Simply, use a :after on the container of the floated elements with the clearing properties added to it.

It looks like this and it goes in your CSS:

1
2
3
4
5
6
7

#myContainer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

Basically, we told the element with the id of "myContainer" to put a "." after it, make it act like a div (display: block), make it have the height of 0, clear both the right AND the left floats, and hide it.

But, of course, IE can not play nice with this pre, so we do the following and put it in the head of our page, outside of the CSS.

1
2
3
4
5
6
7

<!--[if IE]>
<style type="text/css">
#myContainer {
     zoom: 1;     /* triggers hasLayout */
}
</style>
<![endif]-->

This first line says that if the browser is IE, then do the following. (Learn more about IE Conditional Statements. Unfortunately, there is not a Safari / Firefox / Opera equivalent.)

Then, it is giving the element with the id of myContainer a Zoom (Read more about Zoom, an IE only property) of 1, which triggers an IE hack (called hasLayout) that applies a clear to it.

The last line is simply ending the if IE in the first line.

That is it. If you want a condensed version of the IE pre (I don't like large blocks of pre in the head of my pages), here is is!

<!--[if IE]><style type="text/css">#myContainer {zoom: 1;}</style><![endif]-->

Just a note, if you have not already figured it out, you must swap out #myContainer for the id (or class) of the container of the 2 floats.

Thanks to Position is Everything for the original idea and code.