homepage Welcome to WebmasterWorld Guest from 54.161.214.221
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




msg:3883157
 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




msg:3883365
 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




msg:3886441
 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




msg:3886457
 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




msg:3886458
 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




msg:3886513
 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