CSS min-width emulation for IE5-6

{width:50%; min-width:300px;} includes IE5-6 (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 IE6- 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.

Based on a Stu Nicholls' idea for min-width emulation.

Roughly speaking the idea is based on the “incompressibility” of borders: If a box with border is shrinked, its width may become zero, but the border still occupies space. So a box with a left border as wide as the desired min-width is created, and then a widthless box with a negative left margin (again equal to the desired min-width) is nested inside the first one. The inner box expands all over the parent's width and the parent's border and sort of behaves as having the desired min-width.

For browsers different from IE6- 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 this min-width emulation page there is no real min-width property, all browsers receive the same rules (except the hasLayout hacks), Moz, Op7.5+ react like IE (emulating min-width), Saf, Op6 behave differently.

In quirks mode one less wrapper is necessary to get the desired effect in IE: CSS min-width, includes IE - quirks mode.

CSS tests home