I feel like a dumbass for posting this, since googling it brings up a million identical questions, all resolved. But I seriously think this has happened to me in every website I've ever made, and I always end up giving up and finding a way to cheat around it.

The question: How do I make my DIVs stretch to contain all the content I put in there? They always hit the bottom of the viewable browser window, then give up.


Here's the (ugly) site I'm currently working with. (http://www.glowfruit.com/bits/index.htm)

Here's the CSS (http://www.glowfruit.com/bits/style.css)

So I have HTML and Body height at 100%, .outerblue and .content at height and min-height 100%, and a bunch of other things that were supposed to work. I'm currently using Firefox, and I have a sneaking suspicion that getting this to work in other browsers will be a whole other event. I'm also using 960 grid, and although I always have the same problem even while not using a grid, I suppose that could have something to do with it.

I would be eternally grateful for your help here! Feel free to point out any other sloppy things you notice in my CSS -- I'm self-taught, and I feel like poor base knowledge of CSS is the source of most of my problems. :/

Before you end your white box's div add: (So like <div class="white_box"> all your other stuff ----PUT CODE HERE </div>)
<div class="clear"></div>

Do the same for your blue box.

Now go to the CSS, and change height:100% to height:auto; min-height:500px; for the blue box and the white box.

(I've simulated this in firebug, and it worked);

YES, amazing, thank you! Works perfectly.