Question

I have a header/footer <div> that is 100% width. If I make the widows small enough so that horizontal scrollbar appears, and then scroll to the right most of the page, I can see the footer breaks at some point and leave an empty white space as if its width is fixed.

http://jsfiddle.net/enxRw/

Am I missing any CSS property? Do I need an extra wrapper <div>? Do I need JavaScript to check window width and adjust accordingly?

Edit:

The width:1024px for main <div> is on purpose because its content is 2 X 500px images side by side and I don’t want them to wrap when windows is resized down.

Answer 1

Instead of having the width set on the .main div, set it on the body:

body {
    min-width: 1024px;
}

Here’s your fiddle: http://jsfiddle.net/enxRw/1/