This box has a min-width of 300px and a width of 50%. The width can be any percentage (or auto) and the min-width a px or em value.
The effect is obtained with three nested divs:
1px black border is on third box.
For debug only:
If the desired width is 100% or auto, the outermost wrapper can be omitted.
This box has a min-width of 300px and a width of 50%. The width can be any percentage (or auto) and the min-width a px or em value.
This is similar to the previous, but uses a padding instead of a border. Unfortunately this requires a further wrapper for IE/Win. The only advantage is that the box background can be transparent.
Four nested divs:
1px black border is on fourth box.
For debug only:
If the desired width is 100% or auto, the outermost wrapper can be omitted.
In this test page there is no min-width property, all browsers receive the same rules (except the hasLayout hacks) that emulate min-width in IE/Win (and most browsers react in the same way, emulating min-width.) Back to the CSS min-width (includes IE) page where only IE6- receives the hacked rules, other browsers simply get min-width:300px on the first box.