Long clipped columns work in IE 6, IE 7 and IE 8 beta 1 when both column-holder and column are floated

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

In this minimal test case there is only one column – that with the yellow background. The column-holder is also floated.

(Unrelated to the technique in question, note that in IE 6 and IE 7 this test case exhibits an incompatibility with CSS 2.1 in which the line boxes of the in-flow content following the column are rendered underneath the background of the floated column instead of on a stacking level on top of it. This issue does not occur in IE 8 beta 1.)

View other IE implementation bugs related to overflow.

Column content.

In-flow content following the column. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.