“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:


One Response

  1. You are the BEST! This worked beautifully in Drupal. My problem was that i created an image gallery using the Image drupal module. My gallery was to show in the typical content-area style in my theme’s CSS. My content-area style had a grey background and border distinguishing it from the main wrapper and nav on my site. However, the style stopped just above the gallery, leaving the gallery in a random white area…yuck!

    Anyway, i added to a block in drupal that i asked to show only on my gallery page and positioned that block in “content bottom” area of drupal site.

    All fixed! I’m going to post this to drupal community too. Thanks a million!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: