The problem:

When floating multiple divs within a container you will come across a very strange occurance… The container (outlined in red for the example) will not continue to extend down around the elements which are inside of it. In this case the container has a background-color of #fff, which means that the area underneath the right-column should also be white.

View example.

To fix this problem the most common solution is using the clear property in an invisible div or br tag. This method works very well as long as you can keep track of your divs and you are properly clearing only what is needed. The problem that I have with this method is that it adds that little bit of extra markup to the code, when there is a much simpler and cleaner way to achieve the same result.

The fix:


#wrapper {
text-align:center;
width:800px;
margin:0 auto;
overflow:hidden; /* Reminds the container to stretch */
background:#fff;
border:3px solid #f00;
}


View example.

By setting the overflow value to hidden you are basically giving the element a friendly reminder that it should be doing something. You can also use the scroll and auto property to achieve this effect. However, using scroll will result in having scrollbars whether you want them or not. I find this method a lot easier to implement and maintain than using clears, and it helps to keep your source nice and clean.