homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
100% height
tonynoriega

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3808123 posted 8:39 pm on Dec 15, 2008 (gmt 0)

ok, so i figured out how to set my colOne and colTwo to expand 100% in height based on content... well.. sort of...

i set:

html, body {height:100%;}

content-wrap {width:100%; height:100%;}

content {width:800px; margin: 0 auto; height: 100%; position:relative;}

colOne {float:left; position: absolute; width:550px; padding: 0px 10px 0px 0px; height: 100%;}

colTwo {position: relative: left: 570px; width:210px; padding: 0px 10px 0px 10px; height:100%;}

now, i would expect to have the two columns extend to the height of the content that is within them... right?

but what i see is that the page extends down about another 200px or so... so you have to scroll down to see the footer... but the content is not that far down...

what is happening? (both in IE and FF)

 

XtendScott

10+ Year Member



 
Msg#: 3808123 posted 9:30 pm on Dec 15, 2008 (gmt 0)

Try this.

BODY has a default margin that was pushing the content beyond the page. 100% is the total height of the window, including the margin area.

I added some color to the columns for visual reference.

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

#content-wrap {width:100%; height:100%;}

#content {width:800px; margin: 0 auto; height: 100%; position:relative; background:#FFFFFF;}

#colOne {float:left; position: absolute; width:550px; padding: 0px 10px 0px 10px; height: 100%; background:#FFFF33;}

#colTwo {position: relative; left: 570px; width:210px; padding: 0px 10px 0px 10px; height:100%; background:#333333;}

Xapti

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3808123 posted 5:58 am on Dec 16, 2008 (gmt 0)

XtendScott means padding. Margins are not taken into account for element dimensions.

Also , note you floated an element while absolutely positioning it. It's probably not a problem, but realize it's not good code. Following the standards, you may not get what you are intending, since an element cannot be floated and positioned at the same time.

[w3.org...]

XtendScott

10+ Year Member



 
Msg#: 3808123 posted 6:30 pm on Dec 16, 2008 (gmt 0)

Xapti,

I did not modify the padding. The top margin of the BODY tag is what I found to be pushing the columns beyond the actual height of the visible browser area. Setting the margin:0; or margin-top:0; eliminated the issue.

"Margins are not taken into account for element dimensiions." - That is my understanding also, so 100% height would not subtract any margins on the element from its surrounding container. Thus the element height would be equal to the height of the container and would still be affected by any margins.

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