“clear:both” My new best friend

This is probably not the most interesting post in the world, but I need to write it so I don’t forget it. I spent most of the day trying to get an HTML div tag to stretch its height to fit its contents. Sounds easy–right?

Well, it turns out, that if the div contains other elements which have the “float” property set, then the container div doesn’t stretch (in firefox and other browsers). I learned this is the correct behavior. Seems odd, but it is. IE behaves the way you would expect, but this is not compliant with W3C standards.

The solution? Add an element in the bottom of the container like this:

<div style="clear:both"></div>

I should’ve done some better Google searches earlier in the day. I found the answer pretty quickly once I put in the correct phrase. (firefox css float height)

Here’s the link I followed:
http://www.positioniseverything.net/easyclearing.html

Advertisements