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 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.
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
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”.
Post a Comment