CSS: Background image doesn't span entire page width after window resized

HTML & CSS
1

Having trouble with a page where, if you resize the browser window (“restore down”), the background images that are set to repeat-x for DIVs with width = 100%, the background only repeats as far as the window and not the entire page. That is, as soon as you scroll to the right, you immediately see that the background no longer spans the entire page width. Why is this, and how do I fix it? I’m hoping this will be a true “duh” moment for me. :wink:

Here’s a URL to a dumbed-down page with most (but not all) extraneous content and CSS removed:

http://michlink.com/layout_test.html

Thanks for any help.

2

This is happening because

DIVs with width = 100%,
means 100% of the PARENT element ( in the case of your example this meas the width of the VIEW PORT, If you have set explicit width for any of the child elements of the container DIVs… they will OVERFLOW if the sum of their widths become bigger than the size of the window.

For example:
IF sum of width of child elements =960px
and the view port >=960px the container DIVs are >=960px and all seems fine.
HOWEVER
IF the view port =800px the container DIVs are =800px and your content overflows right by 160px.

To prevent this, you could ads something like:
body, html {min-width:960px;}

ADDITIONAL NOTE:
You could fix your drop down by adding #nav ul {position:relative;} and #nav li ul {position:absolute;}

Hope that helps.

3

Thanks so much for the excellent and detailed response. I do believe this qualifies as a “duh” moment, as it’s not the first time I’ve neglected to consider the view port. As for the drop-down, that’s only broken because I removed some of the relevant CSS, but I appreciate you going above and beyond to address that. Thank you, good sir. :slight_smile: