CSS Div 100% Height Problem

[kjdavis1210]

I am working on a skin for DotNetNuke and I am having a problem with setting the height to 100% of one of my Divs. I have done some research and I understand the parent Div needs a height for my sub Div to be set to 100%, however my parent Div is set to 100% and then the body Div is set to 100% and this is still not working. My boss hasn't given me much time on this project and I really need help ... gotta love how people that don't understand IT work set the deadlines. Attached is my code. What I am trying to do is simply have one main Div in the center of the browser window and 2 divs, one on either side that has a gradient to help the box stand out more. Any thoughts or help would TOTALLY be appreciated!

[scrappedcola]

Here is what I changed (assuming you are not working in Quirks mode which messes everything up). You not only need height on the body but you also need height on the html element (silly I think but it's key). Also you need to remove the

height:auto !important;

from the #wrap definition. It's messing up the height in IE7+ and FF. It also looks like you didn't place a height on the #mainbody rule (will need it set to 100% if you want it the length of the page).

Instead of doing the css hacks from IE6 days (naming something important and then redefining it) try to add a browser identifier in your css classes. What I mean is on the server side perform a browser detect and apply classes to your containing element to denote the different versions and then write css exceptions that target that rule. For instance you could have a class firefox, msie, v7 (for IE 7) etc. This way you don't have to use hacks that mess with other rules, you don't have to have browser specific files and you don't rely upon if's in the css.

[kjdavis1210]

Thanks for replying. I tried to follow what you said and it still isn't working and I feel like banging my head on my desk lol. Below is my code with changes as your stated I believe.

[kjdavis1210]

I can email you my entire code. I was looking at your profile and we seem to be in the same state. You can email me directly at <EMAIL SNIPPED> ... I am just so trying to get this project back on track.

[scrappedcola]

the line that keeps killing you is:

html
{
height:auto !important;

You do not need this. Just make it

height: 100%;

straight up, same can be done with body. This is just extra code and is going to break IE7+ and FF. Also the declaration of min-height:100% is unnecessary when you are setting your height to 100% of the viewport.

html,
body
{
	height:100%;
}
body  
{
    background: #e1e1e1; 
    margin:0; 
    padding:0; 
    line-height: 1.1;
    voice-family: "\"}\"";
    voice-family: inherit;
    font: small Verdana, Geneva, Arial, Helvetica, Sans-Serif; 
 }
#wrap 
{
    width: 860px;
    margin: 0 auto 0 auto;
    height:100%;
    min-height:100%;
}
#mainbody
{
    width: 848px;
    border: 1px solid #000;
    background: #FFF;
    float:left;
    height:100%;
}

Also you have my deepest condolences if you really have to code for IE5. Thankfully all of the clients for my company are based at least at IE6 (my current proj I only have to deal with IE8 :-) ).

[kjdavis1210]

Ok I don't really need to support IE5 so I wiped that code out. Here is the site layout I am working on http://www.alserracolorado.com/dnn/ don't mind the menu, another problem with the menu another CSS problem I am trying to solve. But down the sides of the main body its supposed to have a gradient and even after putting in your code its not displaying. Ideas? Thoughts? You should be able to right click and see the code or I can email it to you if you need direct files.

[kjdavis1210]

never mind it has to be something else in my code somewhere. I just copied and pasted only that code into a blank page and it works fine, so ideas or thoughts on what would be overwriting this code not to work?

[scrappedcola]

I've included my html and css for what I did to get it to work (I'm sorry I should have done this to begin with). I also tested it in IE6 and made a tweak to the mainbody width. (The current width was pushing content for me down from between the two gradients). The mainbody width should be tweaked by you (who actually have the images) so you can get the correct fit. If the page is rendering in Quirks mode (ie. doesn't have a proper doc tag as the first line in the page) the height stuff won't work no matter what. You can see if you are in Quirks mode in IE 8 by looking in the Developer tools at the Document Mode (its a little harder to discover in browsers less than IE8).