homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
100% height
tonynoriega




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




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




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




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