Skip to content

Floating columns

I was trying to use CSS to make a 3 column layout, but the footer kept bouncing up. (Note: none of the heights are defined, because the content is dynamic.)

What one might expect to happen.

What one might expect to happen.

What really happens.

What really happens.

It didn’t make sense at first, but floating a div seems to set the height at 0. Which kind of makes sense. After lots of swearing, it turns out that the fix is pretty simple. You just have to add another div with clear set to “both” to stretch out the container div & give it a height.

The fix: a div with "clear:both;"

Yay! (You can also put the footer in the main container, but I think this way is cleaner if you’re messing with lots of backgrounds etc.)

I still don’t understand why CSS sometimes makes the background disappear when different elements are nested w/different margin & padding settings.

One Comment

  1. blowuprobot wrote:

    things seem to get wonky if the column divs have negative margins & autoscroll, even with a clearall div after. i turned off autoscroll to “fix”.

    Tuesday, June 30, 2009 at 8:48 am | Permalink

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*