Div 100% width problem

I have a layout where I have a div within a div. The inner div has a width of 1050px and is centered. The div outside it has a 100 percent width where it uses a graphice that is supposed to lay under the the inner div graphic by being repeaded horizontally.

As long as I have a monitor or screen resolution that fits the 1050px graphic, the underlaying 100% graphic is repeated fine horizontally.

But when I look on a smaller monitor, where the 1050px graphic goes outside the screen, the underlaying graphic stops at a certain point horizontally and doesn’t stretch all the way to the right.

I was wondering how to get around this. The follwoing is my current code

<div id=“underlaying”>
<div id=“1050”>
</div>
</div>

CSS

#underlaying{
width: 100%;
margin: 0 auto;
background: url(underlaying.png);
background-repeat: repeat-x;

}

#1050{
width:1050px;
margin: 0 auto;
background: url(1050.png);
background-repeat: no-repeat;
}

Would be grateful for help with this.

Thanks

the underlaying graphic stops at a certain point horizontally and doesn’t stretch all the way to the right.

I was wondering how to get around this.

Hi,
You should be able to fix it by adding a min-width to the parent.

[B]#underlaying[/B]{
[COLOR=Blue]width: 100%;[/COLOR]
[COLOR=Blue]min-width:1050px;[/COLOR] 
margin: 0 auto;
background: url(underlaying.png);
background-repeat: repeat-x;
}

In some cases the simplest solution that suits also IE6, that doesn’t support min-width, is to apply the same background on the body too.

That worked. Great…Thanks for your help!

I’m not too worried about older browsers. They will go away at some point anyway. As long as it works in the newer ones it’s ok.

Well always be aware of your user base. If 50% of my users were using IE5 (they wouldn’t be) I’d still support that browser.

I just support what my users use, well…I have a little list :slight_smile: