Absolutely positioned div with width 100% is only as wide as the original window size

Question

I have an absolutely positioned div that has a width of 100% with a background image tiling horizontally. When the browser is shrunk to the point that the width of the browser is less than the page, the remaining right portion of the div's background color is truncated.

Is there a better approach or a hack to resolve this?

Here's the example: link with the div in question being the menu.

Edit: to clarify, reduce the size of your browser so that the full width of the page (960px) requires a scroll-bar. At this point, 100% of the "page", or the viewable area, is actually less than 100% of the content. When this occurs, the menu's background doesn't span the remaining content that would require scrolling to the right to see.

This issue is present in ie7, ie8, and firefox 3.5. I haven't tested the other browsers but I can only assume that this happens there as well.

Thanks

Answer 1

Add:

min-width: 960px;

to the menu div selector. Fixes it for me.

With regards to the actual code structure, and as someone pointed out (but promptly deleted their post), perhaps structure your elements in a more logical layout. There's no reason to have the menu as the bottom child element (as far as I could tell anyway)

It's a more linear, free flowing code structure, rather then a spaghetti mess of containers in random orders, that it can turn into.