CSS min-width emulation (includes IE)

{width:50%; min-width:300px;} includes IE5+ (Win & Mac)

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:

the first has width:50%
the second has border-left:300px and hasLayout
the third has margin-left:-300px, position:relative and hasLayout

1px black border is on third box.

For debug only:

first box has orange background, top and bottom border
left border on second box is pink
the little blue and green squares are floats (left and right)

If the desired width is 100% or auto, the outermost wrapper can be omitted.

{width:50%; min-width:300px;} includes IE5+ (Win & Mac)

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:

the first has width:50%
the second has padding-left:300px and hasLayout
the third has hasLayout
the fourth has margin-left:-300px, position:relative and hasLayout

1px black border is on fourth box.

For debug only:

first box has orange top and bottom border
the little blue and green squares are floats (left and right)

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.