DIV background not stretching properly

Question

I have the following HTML code:

<style>
body {
background:#547c15;
margin:0;
padding:0;
}
#inner {
margin:0 auto;
width:1298px;
}
#outer {
background:#000;
}
</style>
<div id="outer">
  <div id="inner">
    <br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

When I am viewing this on a widescreen monitor, everything is fine. But when I am viewing this on a older CRT monitor in a 800X600 resolution, the outer div is NOT fully stretched over the inner div. There is a scroll on the bottom (due to the inner div being 1298px) but the outer div is stretched only to 800px (see image below).

Can someone please help me out with this? I want the outer div to always be 100% width (ie the background color/image should always stretch out completely even when there is a horizontal scrollbar).

Thanks a lot in advance.

Answer 1

Give the outer div width:100%; to make it resize to contain the inner contents, I think it will work, if in case it doesn't work than use min-width:1298px;

Answer 2

在您的#outer中添加以下内容：

    float:left; width:100%;