Example exhibiting two bugs related to long clipped columns in IE 8 beta 1

This example exhibits the following two bugs:

‘Long clipped columns’ is an important, industry-recognised technique for creating the appearance of equal height in (floated) ‘columns’. It works through giving the columns a large padding-bottom and a large negative margin-bottom, and then setting the column-holder’s overflow to hidden so that all column padding below the ‘pulled-up’ bottom border edge of the column-holder is clipped.

This minimal example concerns nested long clipped columns. there is one column – that with the red background. It is floated. It is also the column-holder for a child column. The outer column-holder has position:relative.

Note that in IE 6 – but not IE 7 or IE 8 beta 1 – the rendering is slightly incorrect in that the in-flow content following the column-holder is rendered to the side of the column rather than below the column-holder.

Column content.

Inner column content.

In-flow content following the column.

In-flow content following the column-holder.