Equal height blocks with divs

Appendix - Further notes on browser behaviour

nested within one div - all types of positioning

Mac IE5 sets width too big for pos:absolute (but nothing a hack can't sort out??)

Mac IE5 has the same problem for float

nested float > float

IE5.01 - 100% can be too wide, so the bugger gets shunted down by the height of the first row - a resize puts everything back in place.

Mac IE5 as with one nested float

nested float > absolute

IE5.01 as with float > float

nested float > static

IE5.01 as with float > float

nested float > relative

IE5.01, IE5.5, IE6 - complete failure to render

nested relative > float

Mac IE5 wobbles, all else fine

nested relative > static

IE5.01, IE5.5 & IE6 need inner static div's setting, otherwise total failure to render

Mac IE5 wobbles

nested relative > absolute

Mac IE5 wobbles

Firefox gets width of nested floats wrong unless width set on inner absolute - net result, they stack on top of each other.

Opera 7.5 goes collapses totally haywire unless widths are set on the inner absolute div

nested relative > relative

Mac IE5 wobbles, all else fine

IE5.01 wibbles

nested static > float

Mac IE5 wobbles, all else fine

nested static > static

Mac IE5 wobbles, all else fine

nested static > absolute

Firefox gets width of nested floats wrong unless width set on inner absolute - net result, they stack on top of each other.

Opera 7.5 goes collapses totally haywire unless widths are set on the inner absolute div

Mac IE5 wobbles

IE5.01 wibble

nested static > relative

Mac IE5 wobbles

IE5.01, IE5.5 & IE6 failure to render if no width set on inner relative div

nested absolute > float

IE6 fails to shift down the bottom corners to the bottom of the wrapper and appears to place it just after .content

Mac IE5 wobbles, all else fine

nested absolute > static

Mac IE5 wobbles, all else fine

nested absolute > absolute

IE5.5 collapses horixontally, though the vertical positioning is carried out correctly ( unless widths are set on the inner absolute div)

Opera 7.5 goes collapses totally haywire unless widths are set on the inner absolute div

Mac IE5 wobbles

nested absolute > relative

IE5.01 has the float down-shift sporadically - all these set ups may be prone to it I guess

Mac IE5 wobbles, all else fine

Previous: Four fixed-width columns

  1. Introduction
  2. Basic idea
  3. Coloured
  4. Rounded corners
  5. Coloured with rounded corners
  6. Three columns
  7. Three columns with rounded corners
  8. Borders
  9. Borders and clipped corners
  10. Borders and clipped corners - slight return
  11. Unequal columns
  12. Unequal columns with rounded corners
  13. Four fixed-width columns
  14. Appendix - Further notes on browser behaviour

CSS Stuff index | XHTML | CSS