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