How to set width with 2 div's using pixels and percents

Question

I have this example here.

I'd like you to follow these steps:

• resize your browser window to less than 950 pixels wide.
• now scroll to your right with the horizontal scroll-bar.
• now you will notice that the grey bar (div) stops short and does not continue to the right edge of the page.

I want to know how to fix it so the grey bar continues across the whole page.

Answer 1

Use min-width on the bar itself with the same width as the content in it...

I don't know what kind of cross browser compatiblity you want but this should work in IE7 > . Any more would make this a lot more complex.

Example here:

http://jsfiddle.net/sg3s/hrN5F/

Edit, this might solve it for older versions of IE too, can't test it though http://jsfiddle.net/sg3s/hrN5F/2/

Answer 2

Instead of using css to set your bgcolor and border, use an image 1px wide and however high you need it to be.

`background:url('images/bg.gif') repeat-x;`

Be sure to include a 1px bottom border inside your bg image.