4 replies [Last post]
musuko.san
Offline
Regular
Tokyo, Japan
Last seen: 12 years 14 weeks ago
Tokyo, Japan
Joined: 2008-05-22
Posts: 25
Points: 0

Hey guys,

I've used Google the web and searched this forum for an answer, but I haven't been able to find a solution to this problem. As you'll see, I'm trying to make a liquid layout. I also want the page 100% in height, and the footer to remain at the bottom. I've found tutorials on doing this, but I still have some issues.

http://www.webdesigntk.com/mantas/liquidmantas.html

The first question is why does div#page go beyond the browser window? The goal is not to scroll down if the content doesn't warrant it. So with no content, it should match exactly the height of the browser. My guess is because it wants to span 100% of the height of div#container(which is 100% of the page)... but since there is a 100px header above #page, in #container, it is offsetting down. Is this correct? If so, how do I correct this? It also looks like div#menu has the same issue(expanding beyond it's containing div), or is that another issue?

My next question, is why in IE is div#footer offset to right?

Any help would be greatly appreciated. Thanks.

Jason

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

First question. Your

First question. Your deduction is correct, 100px + 100% means the page will always be longer than 100%. One solution is to put the header inside #page.

musuko.san
Offline
Regular
Tokyo, Japan
Last seen: 12 years 14 weeks ago
Tokyo, Japan
Joined: 2008-05-22
Posts: 25
Points: 0

That did do the trick,

That did do the trick, thanks! I'm still wondering why div#menu extends beyond it's containing div when set to 100%(if FF. in IE #menu seems to extend it's containing div), though. Any one have any thoughts?

Jason

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Floats aren't contained by

Floats aren't contained by their parents ... at least in standards compliant browsers. That allows you to float a tall picture in one paragraph and not have a big gap to the start of the text in the next paragraph. If you want the element to contain its child floats, you need to make the parent starts a new "display context" for its children. The easiest way to do that is to either put overflow (hidden seems to work best) on the parent or float it.

IE isn't standards compliant.

musuko.san
Offline
Regular
Tokyo, Japan
Last seen: 12 years 14 weeks ago
Tokyo, Japan
Joined: 2008-05-22
Posts: 25
Points: 0

ahhh... good info to know.

ahhh... good info to know. Thanks.