Bug with 100% width div - Doesn't extend all the way across

Question

Here is my code running:

http://jsfiddle.net/HMsKa/60/

It's quite simple code, but when you make the preview window small and scroll to the right, you can see the bug. The header and footer bars (orange and blue) dont extend all the way across.

I've tried a few things and cant fix it. Anybody know a solution to this?

Answer 1

The header and footer bars (orange and blue) dont extend all the way across.

this is due to the different width declaration you assigned: for the header you have width: 100%; (calculated as the width of the current visible viewport) and for #main element you have width: 900px; (the footer has no width assigned but, as a block element, its width is 100% by default)

just use the same width (100% or 900px) depending on the layout you want to obtain

Answer 2

Live demo

Hi now define in your body min-width of your page

as like this

add this css in your stylesheet and see the demo

................

body{
min-width:900px;
}

live demo