Question

I am having a bit of difficulties with this page. It’s ALMOST working correctly.

The red box should be centered (h&v) on the window. WORKS.

The yellow box should be affixed to the bottom of the window. WORKS.

When the window is less then 400 pixels high scroll bars should appear and the yellow box should appear at the bottom of the scroll area. Basically I never want the yellow box to appear over the red box, or vice-versa. DOESN’T WORK

Anyone know how I can achieve this?

Thanks.

Answer 1

Add this to the CSS for #wrapper:

height: 100%;
position: relative;

The reason this works is because your absolutely positioned elements are positioned relative to the viewport due to the absence of any other containing block. By adding position: relative to the #wrapper (or the body for that matter) you make sure that the containing block becomes the entire body content instead.

The height: 100% is then only needed to ensure that the containing block does at least reach the bottom of the viewport.