The following table element in the "center" div causes the contents in the "left" divs to be offset by several pixels from the top (8 in my browser). Adding some text prior to the table removes this offset.
Why? How do I stop this from happening without requiring a "dummy" line of text before my table?
<html>
<head>
<style type="text/css">
#left {
display: table-cell;
background-color: blue;
}
#menu {
background-color: green;
}
#center {
background-color: red;
display: table-cell;
}
</style>
<body>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
<div id="center">
<table><tr><td>This is the main contents.</tr></td></table>
</div>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
</body>
</html>
Update0
Note that with floats, I am unable to get a centered column expanding to its content. The source from which I extracted this example uses display: table; margin-left: auto; margin-right: auto; to center everything in the body.