CODEWITHSUNDEEP
htmlcsscss-tables
bern
bern

Reputation: 3

Weird {display:table} behavior

I cannot figure this one out. When using display:table along with display:table-cell, placing an img tag in either cell1 or cell2 will force the content (the "This is a test" content for example), in the other cell to drop below the image. Is this correct? It does this across all browsers so I'm thinking this is correct, but why?

<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            border: 2px solid #000;
            width: 100%;
            height: 100%;
        }
        .table {
            display: table;
            border-collapse: collapse;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div id="cell1" class="cell">
                <h1>This is a test</h1>
            </div>
            <div id="cell2" class="cell">
                <img src="" />
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 225

Answers (3)

Orin
Orin

Reputation: 371

set style="verticle-align:top" for your "cell" divs

Upvotes: 0

R&#233;p&#225;s
R&#233;p&#225;s

Reputation: 1820

Hm. vertical-align: top in the table-cell.

Workin example: at jsFiddle

Upvotes: 2

PHP
PHP

Reputation: 216

This is because inserting an image into the div, takes your layout out of the natural flow of the layout.

I would suggest just using tables, or if not the case use float, and create it that way.

Upvotes: 0

Related Questions