Curious width 100% CSS problem

Question

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

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

1. Please scale 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.

Answer 1

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.