homepage Welcome to WebmasterWorld Guest from 54.227.160.102
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE8 CSS Height
tonynoriega

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3883155 posted 3:38 pm on Apr 1, 2009 (gmt 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%;
}


 

swa66

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



 
Msg#: 3883155 posted 7:41 pm on Apr 1, 2009 (gmt 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.

tonynoriega

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3883155 posted 3:29 pm on Apr 6, 2009 (gmt 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...

Demaestro

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



 
Msg#: 3883155 posted 3:52 pm on Apr 6, 2009 (gmt 0)

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

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

swa66

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



 
Msg#: 3883155 posted 3:52 pm on Apr 6, 2009 (gmt 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)

tonynoriega

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3883155 posted 5:26 pm on Apr 6, 2009 (gmt 0)

problem solved...thanks for the help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved