Truly flexible & equal height content boxes

Have you ever dreamed of flexible content boxes with complete graphical styling ability? Do you wish them to feature equal heights via CSS? Do you need them to be available crossbrowser with full support for older versions of the Internet Explorer?

So, here they are ...

Topic One
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
Topic Two

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

Toptic Three
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
→ read more about Topic One.
→ read more about Topic Two.
→ read more about Topic Tree.

Limits of this solution

This flexible equal heights solution is based on YAML's subtemplates and combines three layout techniques for a crossbrowser working result. The equal height boxes are based on CSS tables (in all modern browsers) and floats (in Internet Explorer 5.x – 7.0). Additionally it uses Alex Robinson's Equal Height technique with all browsers and therefore inherits one of its limits.

As Alex Robinson writes in the Appendix J of his «one true layout» article, some browsers have issues when linking to anchors in elements within the containing block (e.g. anchors of skip-links). This problem is fixed in recent versions of Firefox, Opera and Safari and there is a workaround for IE5.x & IE6 – but this can't be fixed in Internet Explorer 7.0 with CSS. Therefore keep that issue in mind (avoid linking into equalized containers) when using equal heights subcolumns.

Successfully tested in ...

Windows XP/Vista:

  • Firefox 1.0.4, 1.5, 2.0.17, 3.0.3
  • Internet Explorer 5.01, 5.5, 6.0, 7.0, IE8b2
  • Safari 3.1.2, 3.2
  • Chrome 1.0
  • Opera 7.50, 8.54, 9.2, 9.5, 9.6
  • Netscape 7.2, 8.1.3

Mac (OS 10.4/10.5):

  • Firefox 3.0.3
  • iCab 4
  • Safari 3.1.2, 3.2
  • Webkit nightly 5525.26.12
  • Camino 1.6.4
  • Opera 9.62

Linux (Ubuntu):

  • Firefox 3.0.3

Mobile Browsers:

  • Safari (iPhone)
  • Fennec 1.0a1 (Mobile Firefox, m9 Nokia)
  • Opera Mini 4.2 (Windows Mobile)

Other Plattforms:

  • Opera 9.3 (Nintendo Wii)