IE8 CSS Height

[tonynoriega]

IE8 seems to have screwed up my height on my columns and wrapper....

what i had working was a header, and two column within a wrapper, and they would expand height wise, based on how much conent was in there...

now i see a few things... content is running past the sidebar column, and main column is cut off right below the last of the content.

i cant seem to get the left col and right col to be equal heights, based on teh content in the right column, which will always expand longer than the left col.

body, html {
margin:0;
padding:0;
height:100%;
}

#wrapper {
background:#fff;
margin:0 auto;
width:800px;
height:100%;
}

#header {
width: 800px;
height: 175px;
margin: 0 auto;
position:relative;
}

#left_col {
background:#fff;
float:left;
width:275px;
height:100%;
}

#right_col{
background: #fff;
float:right;
width:525px;
height:100%;
}

[swa66]

I'd remove the height: 100% on the left_col and right_col, change the height:100% to min-height: 100% on the wrapper and add either a clearfix or a simple <br> with clear :both on it inside teh wrapper after the left_col and right_col.

If you need backgrounds: fake them on the wrapper.

[tonynoriega]

I have tried that, and clearfix, as found here: [webmasterworld.com...]

and its still not working...

i changed my CSS to reflect below:

body, html {
margin:0;
padding:0;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
height:100%;
}

#wrap {
background:#ffffff;
margin:0 auto;
width:800px;
height:100%;

}

#left_col {
background:#fff;
float:left;
width:275px;
}

#sidebar {
background: #fff;
float:right;
width:525px;
}

FF displays great,... but IE8 is cutting off the left_col, and here is what is weird.. the wrap, even if i put a background image, with repeat, does not show it all the way...

the wrap is getting cut off...

[Demaestro]

Where you have height try this. (use all three in this order)

min-height:100%;
height:auto;
height:100%;

[swa66]

I'd use min-height:100% instead of height:100% on the #wrap.

Normally Firefox and any other standards compliant browser will cut off the #wrap at the height of your viewport too (provided there is enough content to make it scroll of course)

[tonynoriega]

problem solved...thanks for the help.