Pull-up fails for basic long clipped columns with post-column in-flow content in IE 6, IE 7 and IE 8 beta 1

‘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 the column-holder has an orange background. There is only one column: that with the red background. It is not floated. There is in-flow content after the column.

In IE 6, although the in-flow content after the column is correctly placed below the column’s own in-flow content, the column’s background rendered for approximately 200px before being clipped. Moreover, the background of the in-flow content after the column is rendered a second time after this 200px space. The column-holder’s background is not clipped at all, and scrollbars allow scrolling to the bottom of the column-holder’s unclipped content area.

In IE 7 and IE 8 beta 1, although the in-flow content after the column is correctly placed below the column’s own in-flow content, the column is not clipped, and scrollbars allow scrolling to the bottom of the column-holder’s unclipped content area.

View other IE implementation bugs related to overflow.

Column content.

In-flow content following the column.