forcing divs to end of content

[byss]

Okay, here's the links.
Page - http://www.wotmasters.com/all/index.html
CSS - http:/www.wotmasters.com/all/ref/default.css

Although I'm not finished, the design looks mostly the way I wish to it as I view it in a resolution of 1024 x 768. But when I switch to 800x600 to do some usablity testing, it's not quite as pretty.

I've got a "container" div that has the teal colored background, while the body background is the yellow. But at 800x600, the teal does not go to the bottom of the content. Instead, it goes to merely 600 pixels down (the 100% height of the screen) offset by my top margin.

And if I try setting it to auto as opposed to 100% for height on my container div, the div seems to collapse.

Anyone know how I can force the container div (and thus my teal color) to the botttom of the content without measuring by guess-and-testing the number of pixels? The content will change so I'd rather not hard-code it that way time and time again.

Thanks.

[simpletex]

Okay, here's the links.
Anyone know how I can force the container div (and thus my teal color) to the botttom of the content without measuring by guess-and-testing the number of pixels? The content will change so I'd rather not hard-code it that way time and time again.
Thanks.

I was just about to post the same question. I own the Sitepoint CSS book and I can't even find a reference to such a situation. Basically I'd like it to mirror the Sitepoint main page in the way it acts.

Also, I can't get the footer div container to stick to the bottom of the screen, and I can't figure out why. This seems like it would be such a common occurence with the three column, hesder-footer setup that it'd beeasy to find reference to, but I'm stumped!

[Geof Harries]

I am using a 3-column layout, with a box up top, with code borrowed from http://www.thenoodleincident.com/tut...on/basic4.html

After playing around with my css page for a while, I got this code to work in all major browsers, including:

- Windows: IE 6, Opera 7.11, Netscape 7.1
- Mac: Safari, Mozilla 1.5, Camino 0.7, Opera 6.02

#footer {
text-align: left;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
width: 97%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family: inherit;
background: #FFFFFF;
}

html>body #footer {
width: 97%; /* ie5win fudge ends */
}

Try it out with a container like <div id="footer"> where the content sits.

geof

[byss]

I still can't get this to work. Any other suggestions?