Menu
Community /Pin to ProfileBookmark
Misbehaving CSS display:table;
I’m trying to eliminate HTML tables in my pages in favor of the CSS equivalents, and I’m running into a snag. I’ve put together a simple demo to show the problem. I’m simulating three columns of mixed text and graphics. So there is a div styled as a table, followed by a div styled as a table-row, and then three divs styled as table-cell. Each is filled with demo text.
But at the top of the middle table cell, I’ve placed a div set to the width of the cell, a height of 200px, and a red background. Its the one with the “testImg” class (My original problem was noticed with an <IMG>, but the problem is the same with the simple DIV.)
So as expected, the text in the middle column gets pushed down below the 200pX taken up by the height of the DIV . What is NOT expected is that the text in the first and third columns also gets pushed down! That is crazy, and NOT the way HTML tables work.
Now notice that I have a commented out <br> at the top of the second cell, right above the red styled DIV. If you put that <br> back (by UN-commenting it) the problem goes away. So at the expense of the single extra unwanted space added to the top of the second column, the text in the first and third columns go back to the normal expected behavior, starting at the top of the column!
So is this a BUG in the the way CSS simulates tables? It happens in every browser I own. Obviously I COULD just code a special case, adding a <br> with a font-size of near zero above any images or blocks appearing at the top of a “table-cell” DIV. But I’m hoping I’m just missing something obvious that will solve the problem, without resorting to a kludge.
[code=html]
<!DOCTYPE HTML >
<html>
<head>
<title>Column Problem Demo</title>
<style>
.table {display:table; width:100%;}
.trow {display:table-row;}
.tcell {display:table-cell; padding:5px; border: 1px solid black; }
.testImg {width:100%; height:200px; background-color:red;}
</style>
</head>
<body>
<h1>Column Problem Demo</h1>
<div class=”table”>
<div class=”trow”>
<div class=”tcell”><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec viverra mi, ac ultricies erat. Suspendisse at lacus euismod, facilisis leo ac, posuere nisl.</p></div>
<div class=”tcell “>
<!– <br> uncomment to elimiate problem –>
<div class=”testImg”></div> <!– or, could be an image –>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec viverra mi, ac ultricies erat. Suspendisse at lacus euismod, facilisis leo ac, posuere nisl.</p></div>
<div class=”tcell “><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec viverra mi, ac ultricies erat. Suspendisse at lacus euismod, facilisis leo ac, posuere nisl.</p></div>
</div></div>
</body>
</html>
EDIT: OK… I may have solved the problem. If I add “vertical-align:top;” to my table-cell DIV styling class, the problem seems to vanish. I’d like to say “EUREKA”, but it still seems crazy though that the inclusion of a graphic or other object in one column should affect the others! I wonder what other “gotcha’s” I’ll discover as i attempt to convert all my old TABLE based pages to the CSS display:table methods!
Sign in
to post a comment