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 pure CSS? Do you need them to be available crossbrowser with full support for older versions of the Internet Explorer? So, here they are ...
Simple Usage
This very simple example shows how to use Class .equalize to set up a subtemplate with equal height content boxes.
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.
Advanced Usage
Now a more advanced example. The following three content boxes are fully grahpical styled and they contain a "more" link at the bottom of each box. Check out the markup these links as this is an accessible best-practice-solution.
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.
→ read more ...Summing up
About this example
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.
Limits of this "equal heights" approach
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.x, 3.5+
- Internet Explorer 5.01, 5.5, 6.0, 7.0, 8.0
- Safari 3.x, 4.0+
- 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)