"Clearing" floats with overflow: auto

Posted in HTML and CSS -

It is so simple to clear floating HTML elements with overflow:auto but this doesn't seem to be common knowledge. The most common way to clear floats is with a float clearing div; a hackish method involving writing content using the :after pseudo property; or unbelievably using <br clear="all"> as I saw posted on another site yesterday. This post looks at the simplicity of overflow:auto.

Example

Here is what we are trying to achieve: a container with some floating divs and a border that extends around all child elements. Any subsequent content should appear after the container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices luctus hendrerit. Praesent id leo nec urna mollis mattis et at ipsum. Ut pellentesque consequat ligula, porttitor ornare nulla posuere quis. Mauris dolor risus, convallis quis convallis eu, sodales eget dolor. Suspendisse potenti. Nam tincidunt feugiat consequat. Aenean elementum eros sit amet libero pellentesque pretium. Proin eleifend venenatis libero in laoreet. Donec ullamcorper euismod cursus. Nulla eu rhoncus nisi. Morbi velit sapien, molestie eget euismod ac, pulvinar laoreet nibh. Donec non commodo sem. Nunc ac nulla sit amet diam malesuada interdum. In mauris sem, imperdiet sed imperdiet at, aliquam ac lacus.
Phasellus fermentum imperdiet ante sit amet rutrum. Integer dapibus mi ut sem posuere accumsan commodo elit blandit. Ut in laoreet leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et odio vel quam tempus ultricies at quis nisi. Suspendisse aliquam tempor orci, ac tincidunt magna faucibus a. Donec vitae est dolor, a convallis ipsum.

 

The traditional float clearing method

Here is the HTML with inline CSS to show the above using the traditional float clearing method, which involves putting a clear:both style div inside the end of the container. The class name is typically something like "clear":

<div style="border:1px solid #000; width: 510px;">
    <div style="width:250px; float: left; background-color: #ccc; margin-right: 10px;">...</div>
    <div style="width:250px; float: left; background-color: #ccc;">...</div>
    <div style="clear:both"></div>
</div>

Using overflow:auto in the container

And here's the nicer way of making the container extend to the height of the largest child using overflow:auto. This negates the need for additional markup in the form of the clearing div and means all the work can be offloaded into an external stylesheet. Note again I have used inline CSS for this example to make it clear what each div is doing.

<div style="overflow:auto; border:1px solid #000; width: 510px;">
    <div style="width:250px; float: left; background-color: #ccc; margin-right: 10px;">...</div>
    <div style="width:250px; float: left; background-color: #ccc;">...</div>
</div>

A note on IE6

In order to get this to work in IE6, hasLayout needs to be triggered. This is done when the width or height of an element is set but if you do not want to set the width or height, you can instead trigger hasLayout with the proprietary Microsoft zoom CSS property like so:

.myDivWithFloatingChildrenLayers {
    overflow: auto;
    zoom: 1;
}

or inline:

<div style="overflow:auto; zoom:1">...</div>

Conclusion

Using overflow:auto is a much tidier way of ensuring the container is the same height as its maximum child element because it no longer requires littering the HTML source with clearing divs. This method works in all browsers including IE6.



Related posts:


Comments