CSS: Floating divs have 0 height

It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.

You can use the overflow style to make the parent element take the floating elements in consideration:

#outer { overflow: auto; }

There are a couple of solutions to this issue:

#outer: overflow: hidden;

or add some non-displaying content to the outer div that comes after the floated divs that you then add a clear: both style rule to.

You can also add, through css, the :after pseudo-element to insert content after those divs that you then apply clear: both to - this has the advantage of not requiring extra markup.

My preference is the first one.

Try this:

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div style="clear:both"></div>
</div>