What I want to do seems simple enough. Have a gray colored bg with a white container centered on the page (all browsers) that has a height of 100% of the browser. (So it basically looks like 3 columns, 1 row.) I tried this for the bg (body) and the centered column (main_container). But it doesn't work. Any ideas???? I've also tried a height of something big, like 2000px, but then there was a scroll bar... body { margin: 0px auto; /* align for good browsers */ background-color: #F1F1F1; height: 100%; } #main_container { margin: 0px auto; /* align for good browsers */ text-align: left; /* counter the body center */ padding: 11px 11px 11px 11px; height: 100%; width: 875px; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: small; top: 0px; } Code (markup): Thanks...
It seems to me that you can only use height: 100%; with an old doctype, like HTML rather than XHTML transitional.
Google CSS 100% height model But basically you'd have 100% height on the html and body elements and a container with min-height: 100% and height: 100% for IE6 alone problem comes in here you can center horizontally to your heart's content centering vertically can be done but is a pain. A few choices: Paul's (older) method using two containers and IE Conditional Comments (cause IE is stupid): http://www.pmob.co.uk/temp/vertical-align11.htm Gary's newer method but also needs some BS for IE: http://gtwebdev.com/workshop/vcenter/vcenter-css.php Another option is to use a wrapping table. It's basically BS code for everyone: your container would be a table with a single cell (td) and vertical-align: middle on it. Problem there is, tables never legally had height attributes. No, never. Not even in the Bad Old Days, though people did it. A lot. But anyway you have another problem. You don't want scrollbars. Well, since you cannot determine what my screen height is or anyone else's, nor how large we make your text with text-enlarge, you cannot determine when your content spills out of the bottom of your container and needs a scrollbar. Also, you seem to want a grey border around the page? Almost better to fake it with images on the body and container. If your container is set to min-height: 100% like I mentioned above, that's 100%. You cannot add top or bottom padding to 100%, so you'd need to fake it with header and footer elements pulled up over the top and bottom of the container. So, it can be done, but for such a seemingly simple set-up, it can be a steaming pile of code. *edit Oh, and this is bunk: body { margin: 0px auto; /* align for good browsers */ Code (markup): You cannot center things that have no width, nor should anyone be centering the body anyhoo. Auto margins can center a box who is a child of the body, though, but those margins have to be on the box itself. Text-align: center is what can sit in the body for old IE and affect children. *edit2 this isn't exactly what you are looking for, but it's another way to "fake it"-- it's all absolute positioning based on Paul's (fake frames) technique but without the extra containers nor the IE5 or IEMac code in it: http://stommepoes.nl/fixedheadertest.html The thing doesn't reallyvertically center but because the footer always covers the bottom with a background image which matches the body's it kind looks sorta centered. The design isn't horizontally centered but that can be done I think. I never tried it. You'd have a fake right sidebar to do that. *edit 3 here's an example of faking borders with images. Take a look in IE6 to see that they do not show there (IE6 cannot support position: fixed): http://www.csszengarden.com/?cssfile=/069/069.css