Make container overflow its parent without making the parent bigger in IE 6?

Question

I used the three column layout in A List Apart's "In Search of The Holy Grail" article for a store I'm working on that uses Magento. Inside the middle column, at the top, there's a container that I would like to overflow so it extends outside the middle column and goes over the top of the right column. Like below.

_______________________________
|     |                       |
|     |  Middle/Top           |
|Left |_______________________|
|     |                 |     |
|     |  Middle/Main    |Right|
|_____|_________________|_____|

The way I've got it works fine in all modern browsers, but in IE 6 the overflowing Middle/Top section causes the width of the Middle/Main section to expand an contain it.

Does anyone know of a way to fix this?

Answer 1

The issue I see in IE6 is that the #sub-content and #sidebar are in the wrong place, horizontally. Try making a minimal test case and compare your structure and styling to the Holy Grail structure and styling. One difference is you've swapped the left and right columns (#sidebar should come before #sub-content). Fix that to start.