100% height

[tonynoriega]

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]

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]

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]

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.