CSS min width div not forcing it's container to be the right size as expected

Question

I have a DIV that need a minimum width. I can't use the CSS min-width as its not cross-browser. I've created a inner div with a set width. When the browser is smaller than this inner div I get a scroll bar as expected.

The issue is that the outter div keeps shrinking smaller than the inner div.

See here for an example.

I would expect the blue to be the same width as the yellow.

Whats wrong with my CSS?

Answer 1

min-width is supported by all browsers except IE6. If you don't need IE6 support, you can use min-width like normal.

If you do need IE6 support, IE6 happens to treat width (and height) the same way that other browsers treat min-width (and min-height). You can use a hack to fake it:

#outer {
    width: auto !important;
    width: 1000px;
    min-width: 1000px;
}

IE6 will apply the second width property (which it will treat as min-width) because it incorrectly ignores the !important on the first one. Other browsers will set the width to auto and the min-width to 1000px.

Hopefully I've understood your question correctly. Here's a modification of your original code with this update: http://jsfiddle.net/6e6yX/6/. Does this do what you're looking for?

Answer 2

If you add:

float: left;

To both of them, they'll behave as you're expecting.

http://jsfiddle.net/eVWKu/