Trouble with a simple display:table layout

Salam (means hello) :)

I have the following simple layout, the problem is that adding content to right div makes content on left one come down:

JS Fiddle

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent{
            width:800px;
            height:100px;
            display: inline-table;
            border: 1px solid #e8e8e8;
            background: #fcfcfc;
        }
        .parent .right{
            width:90px;
            display:table-cell;
            padding-top: 10px;
            text-align: center;
            background: #f5f5f5;
            color:#666666;
        }
        .parent .left{
            width:710px;
            display:table-cell;
            padding-top: 0px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">
        This cell has padding-top:0px
    </div>
    <div class="right">
        <img src="images/icon.png">
        <br>some text
    </div>
</div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *