## 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)

## 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 One

- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5

→ read more ...

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

###### Topic Three

- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5

→ read more ...

### Summing up

→ read more about Topic One.
→ read more about Topic Two.
→ read more about Topic Tree.

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