Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: not2easy

Message Too Old, No Replies

IE8 CSS Height

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Sept 8, 2006
posts:1229
votes: 0


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)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Sept 8, 2006
posts:1229
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2606
votes: 0


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)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Sept 8, 2006
posts:1229
votes: 0


problem solved...thanks for the help.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members