100% width <div> doesn't stretch when window is resized down

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/

Answer 2

Yes you can go with a wrapper div. Or you can specify a min-width on the body element.

Percentage widths are calculated as a percentage of the parent node. In this instance that is the body node.

Since you have not set a width on the body node it is calculated to be the width of the viewport. (You can check that out by looking at the body node in an inspector)