How do I keep divs from resizing in IE6?

Question

Here\'s my markup (live repro):

  
header 
  &         


        

Answer 1

No simple combination of containers or CSS directives seemed to work for me. Here's what I ended up doing (I already have jquery in my stack):

// set the header div's width in px on page load/window resize
$(window).bind('load resize', function() {
  $('#header').css('width', $(window).width() - 20 /* scrollbars */);
});

This is a duct-tape solution for sure: it treats the symptoms more than the root cause...but it seems to work well enough that I can move on to better things.

I'm confident a pure-css solution exists to this problem...if you have it, please post it!