CSS min-width emulation for IE - quirks mode

{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.

In IE the effect is obtained with two nested divs:

1px black border is on second box.

For debug only:

{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.

Three nested divs:

  • the first has width:50% and padding-left:300px
  • the second has 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 top and bottom border
  • the little blue and green squares are floats (left and right)

For browsers different from IE the first box has min-width:300px, and all the rules for the other boxes are hidden (except the 1px black border on the innermost one.)

In standards mode one more wrapper is necessary to get the desired effect in IE: CSS min-width, includes IE5-6 - standards mode.

CSS tests home