Welcome to WebmasterWorld Guest from 54.242.105.196

Forum Moderators: not2easy

IE8 CSS Height

   
3:38 pm on Apr 1, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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%;
}

7:41 pm on Apr 1, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

3:29 pm on Apr 6, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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...

3:52 pm on Apr 6, 2009 (gmt 0)

WebmasterWorld Senior Member demaestro is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

3:52 pm on Apr 6, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

5:26 pm on Apr 6, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



problem solved...thanks for the help.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month