Why do floats need to be cleared

This works:. The use of a width or height declaration is required to make the effect work in Explorer Windows and Opera. If you don't include it Explorer Windows continues to show the border at the top of the columns, as if there were no overflow.

Opera completely hides the content of the container. If Explorer Mac is still important to you, use overflow: hidden. This browser always shows scrollbars when you use overflow: auto ; and I'm not sure why. As Dave Shea noted , this solution might cause unwanted scrollbars if the content escapes from the container box.

Personally I wonder if this will be a serious problem. For an example, see the 2 column layout demo. The footer should sit below both the sidebar and main content. To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. When all of an elements children have been set to float, the element behaves as if it has no children. This means it has no content and therefore, a hight of 0.

The specs go into more specific details. Thank you guys for your replies, its hard to describe in words how it helped me to understand the concept! I know wrote the further summary in my own tongue:.

Naturally, floated elements tend to drag elements that comes right after them in the document flow. There are two types of HTML elements: block and inline. Elements after a floating element will flow around it. Use the "clearfix" hack to fix the problem:. If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this problem:. The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding else you might see scrollbars.