position:relative on column-holder with floated column generates scrollbars for long clipped columns in 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 there is only one column – that with the red background. It is floated. The column-holder has position:relative.

In IE 8 beta 1, the layout is rendered correctly, but scrollbars allow scrolling to the bottom of the column’s padding area.

In IE 6 and IE 7 the pull-up works correctly. Note however that in IE 6 – but not IE 7 or IE 8 beta 1 – the rendering is slightly incorrect when there is no in-flow content following the column.

(Unrelated to the technique in question, note that in IE 6 – but not IE 7 or IE 8 beta 1 – this test case exhibits a bug in which the column is only clipped below the bottom edge of the in-flow content following the column holder. The line boxes of the in-flow content following the column are rendered underneath the background of the unclipped part of the floated column.

View other IE implementation bugs related to overflow.

Column content.

In-flow content following the column.

In-flow content following the column-holder.