This issue was largely fixed in Internet Explorer 8 beta 1, though it gets the column width algorithm wrong. Internet Explorer 8 beta 2 has better handling of the width algorithm, but still gets it wrong beside floats, as on this page. This has been fixed in Internet Explorer 8 final, but it still incorrectly treats display:block on table elements (including tr and td/th elements) as the default display type for that element, instead of block.
For quite a few years now, people have been trying to remove tables from the structure of their sites. They cause numerous accessibility problems, they make it next to impossible to change brand styling, and they produce horribly bloated pages.
But people still want muti-column layouts. They want them to be flexible. 2, 3, 4 columns. They want them to be consistent, so that all columns are the same length. This is where CSS falls over. Or so we were led to believe. Several people came up with their own ways to do this. Some using images, some using floats and clears. Things like this should not have to rely on images to simulate columns. But floats rely on one column being longer than the others. But what if you don't know which should be the longest?
Well, this is what tables do. And they do it very well. But how do we use tables, and break free from their restrictions at the same time? Simple. Use CSS table display styles to convert existing structures into a pseudo table. Sounds good. And it would be, if only IE bothered to support them. But hey, if they haven't implemented styles from CSS 1, what are the chances of them implementing something as clever yet simple as this from CSS 2? Even if it does date back to before IE 5.
Demo: The main contents of this page should be held in a three column layout.
Workaround: Stick with minimalist tables (where you use them to define the columns and nothing else). For now..