CaldwellYSR
Member
So I have two nested divs that are giving me some troubles. Basically it looks like...
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.
HTML:
<div id="main">
<div class="wrapper">
<!-- Other content that isn't important to the issue -->
</div>
</div>
HTML:
#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.