Curious width 100% CSS problem

I just realized that every browsers seem to have a curious render problem.

This is the test case: http://jsfiddle.net/cKNQD/

1. Please sc开发者_StackOverflow中文版ale your browser until the bottom scrollbar appears.

2. Then scroll to the very right.

You will see, that the #header will not longer have a 100% width. The problem seems to be the .wrapper inside. I need that wrapper to limit the dimension of the #headers content.

Solution welcome.

Add min-width: 980px; to the header.

See updated fiddle demo.

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.

Width of #header is not defined, so it is not 100%, it is "auto".

Maybe you should remove "width: 600px" from .foo class?