This is a now invalidated bug report. For the solution and explanation, see the final examples.

I'm trying to use the display value of table to handle some height issues. Unfortunately, the retarded CMS I've got to use keeps sticking tables in my layout and it seems to be breaking things. This is a test just to verify there isn't a workaround…

To use a straight table based layout, this is how it ought to look:

When the three divs have a display of table-cell, this is how they render:

When the center column contains a table though, this is how it renders:

The same thing happens on the sides:

Changing the display type of the table has no effect:

I don't really understand why this is happening, but there is a border the height of the middle table on the left and right columns. This is what is looks like with the style:

.center { overflow: hidden; } .center table { margin-top: -100%; }

The best solution I can come up with is to float the table, so it out of the normal flow and doesn't cause the margin.

.center table { float: left; }

I'm also getting some extra space at the top of the table and to fix it takes this style:

.center table { margin-top: -.8em; }

Using absolute positioning doesn't work because:

1. The phantom space is still present at the top of the table
2. The table can now overflow the bottom of its parent

At the recommendation of Philippe in the bug report recommends trying vertical-align: top, so I'm going to do that. Cool, that looks good. It is also good in: Safari, Opera and Firefox XP. This is excellent because my workaround brings up a different bug in Firefox.

Does it still work if the vertical-align is set to middle?

Yep, and bottom?

So the default is baseline, the description for which in the context of tables is:

"The baseline of a cell is the baseline of the first line box in the cell. If there is no text, the baseline is the baseline of whatever object is displayed in the cell, or, if it has none, the bottom of the cell box. The maximum distance between the top of the cell box and the baseline over all cells that have 'vertical-align: baseline' is used to set the baseline of the row."

So, I guess I was wrong. Apparently, the entire table in the center column is a line box and so the baseline is at it's bottom. I do think though that this example should not render differently than the initial table example. I suppose though that the table example is a case where following the spec would be confusing. It certainly was to me…

This page seemed to display correctly in Safari, but then I was playing around with the drop down above and changed the display style something and then to block. (Just going straight to block doesn't cause anything.) This caused the display to be like Firefox and changing it back to inline had no effect. If I do inline before block however, it just removes the border.

Opera 8.54 also displays like Firefox except when the table has a display or inline. Then it does it the expected height but with an odd line above and below. Floating elements though does not provide a solution.

Konqueror 3.5.2 does like Safari complete with the behavior when it is changed via a script. Though the first change puts it over the line and it stays there.