Menu
I just stumbled over a very strange behavior with a layout which uses the table-cell css property. I tried the following code in current FF, Safari and Chrome. The behavior is the same everywhere.
My questions is whether someone knows why this happens. Is it a browser bug or a defined behavior? I found this question which has a hint on how to solve the problem, but I would rather like to know why this is happening in the first place. I think other people would also like to know.
Problem: If I comment in the in the second table-cell, everything is fine. If, however the div stays empty the content of the two other cells has something like an "offset-top". This offset has the same dimension as the height of the middle cell. I.e. the content of the outer cells is shifted to the bottom. I added two screenshot div_not_empty.png and div_empty.png.
thanks
Update
I forgot the screenshots. Here they are:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Strange behavior with table-cell formatting</title>
<style type="text/css" media="screen">
#table {
display: table;
background: #efefef;
}
div.cell {
display: table-cell;
}
#c1 div.content {
width: 200px;
}
#c2 {
border-left: 2px solid #ccc;
}
#c2 div.content {
height: 150px;
width: 150px;
background: #aaa;
vertical-align: bottom;
}
#c3 {
width: 200px;
border-left: 2px solid #ccc;
}
</style>
</head>
<body>
<div id="table">
<form id="c1" class="cell">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut.
</div>
</form>
<div id="c2" class="cell">
<div class="content">
<!-- -->
</div>
</div>
<div id="c3" class="cell">
<div class="content">
Dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit.
</div>
</div>
</div>
</body>
</html>
836
asked Mar 07 '26 22:03
It's got to do with the way that vertical-align: bottom is calculated - see the mdc docs, when applied to table cells, bottom "Aligns the bottom padding edge of the cell with the bottom of the row".
When the table cell has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be).
With a element, there is content to use as the basis for the alignment; without it you'll notice the browsers line the bottom of the element itself up with the bottom of the first line of content in the other elements.
re: the question you link to, using vertical-align: top works because the layout is calculated based on the top of the block elements, not the content they contain.
A simple fix for the issue is to add padding to the .content divs in your stylesheet, which then causes them to render as if they have content, meaning you don't need to have 's in your code when there's nothing to display:
div.content {
height: 150px;
padding-bottom: 1px;
}
Try this and you'll see it behaves as you expect.
So; not really a browser bug, as the browser is trying to calculate the position based on the content (or, bottom of padding) of an element, and the element has no content. Possibly an unintended side-effect of the spec in this case though.
On a related note, your css rule div.cell isn't matching the first 'cell' which is a form element. It's working because all elements inside a display: table element have display: table-cell applied automatically, but not the best.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
