HTML/CSS Scale div over full site when scrollbars appear

Question

I have the problem that a div is not scaling over the full page when the page is not fully seen, i.e. scroll bars appear at the bottom.

Scales fine:

Does not scale fine when seen part is too small:

How can this be fixed? Here's the fiddle: http://jsfiddle.net/gdztn/29/

Clarification: The inner div must always be 800 px wide while the outter div should scale over the whole width of the page. As you can see in the second image, the outter div does not reach the right end of the page when scrollbars appear.

Thanks!

Answer 1

the problem is that the #head width is 100% and the inner div has a fixed width. if you scale the page down, it's still 100% but smaller than the inner div. it's like having a smaller container and an exceedingly bigger content which overflows.

to address this problem, you should set min-width of the #head to keep it from shrinking smaller than the inner div, like min-width: 850px

http://jsfiddle.net/gdztn/43/

EDIT: also remove position:absolute from #head. if actually needed to be absolute, then add width:100%