Table element in CSS table-cell offsets other table-cell contents
Posted
by Matt Joiner
on Stack Overflow
See other posts from Stack Overflow
or by Matt Joiner
Published on 2010-03-08T14:04:46Z
Indexed on
2010/03/08
14:06 UTC
Read the original article
Hit count: 784
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>
© Stack Overflow or respective owner
