Wrapper issue

[CaldwellYSR]

So I have two nested divs that are giving me some troubles. Basically it looks like...

<div id="main">
    <div class="wrapper">
        <!-- Other content that isn't important to the issue -->
    </div>
</div>

#main {
    background: #c03dk3 url("path/to/image") repeat-x;
}
#main .wrapper {
    /* a little texture */
    background: url("path/to/different/image") repeat;
    width: 960px;
    margin: 0 auto;
}

This all seems to work just fine... but when I make the browser window smaller than 960px the background color from #main starts to recede to smaller than 960px. I don't really understand why it's doing that, I've tried putting width 100%; on the #main div but that doesn't do anything. The main div will be the width of the browser window and stay left. When I scroll right to see the rest of the content the background isn't there anymore.

 

[ronaldroe]

The main div is only going to take up the width of the window, regardless of the width of what it contains, because you didn't define an absolute width. At 100% width, it will always take up the width of its container, which in this case is the viewport. If I understand your issue correctly, you'll need to add a min-width to #main to keep it from getting smaller than what it contains.

 

[CaldwellYSR]

Ah, such a simple fix. Thanks! min-width did the trick.