[BNM] IE7...meh.

[David Andrew]

This is an explination for min width:

  First, let's define the difference between width and min-width.
width is a fixed width. "I want it this width, darn it! This width --
not more not less." Min-width is, as the name indicates, a fixed
minimum width. "I want it to be at least this width, darn it! This
width, possibly more, but certainly not less." An !important
declaration can be likened to an override. It allows you to declare an
overriding property, which will be considered taking precedence even
if there are other rules with the same specificity declaring something
else.

Standards compliant browsers (which now, for this exercise, also
includes IE7) behave just that way. IE6, on the other hand, does not
understand min-width at all. And, furthermore, it treats width as if
it were min-width. Additionally, IE6 ignores !important.

Now, let's look at each declaration individually.

min-width: 500px;
This declares the minimum desired width to 500px.

width: auto !important;
Let the actual final width auto-adjust (while obeying the declared
min-width, of course). Even though auto is the default for any
element's width, we want to declare it because of the following rule.

width: 500px;
Declare the fixed width as 500px.

Now, why does this work? Well, standards compliant browsers will see:
min-width: 500px;
width: auto;

IE6, on the other hand, due to ignoring !important and not
understanding min-width, will see:
width: 500px;

Due to the incorrect implementation in IE6, in all browsers we now get
an element which is at least 500px tall, but will stretch to
accommodate whatever additional width is necessary.