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.
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.
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.
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?
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.
ahhh... good info to know.
ahhh... good info to know. Thanks.