CSS display:table

Question

I am trying out the CSS display:table property on some divs, but I am having problems. Below is the code snippet for my test:

<div id="table">
<div class="table-row">
    <div class="table-cell">
    <img src="" width="70px" height="70px" />
    </div>
    <div class="table-cell">
    <h1>TEST</h1>
    </div>
</div>

<div class="table-row">
    <div class="table-cell">
    <form>
    <input type="text"></input>

    </div>
    <div class="table-cell">
    <input type="submit" value="Submit"></input>
    </div>
    </form>
</div>

with the following CSS:

#table{
display:table;
}
.table-row{
display:table-row;
}
.table-cell{
display:table-cell;
}

The desired result can be seen in the image below:

Answer 1

• Your desired result doesn't look like a normal table layout. The widths of the columns in the first row are not the same as the width of the columns in the second row.

• You are trying to open a form tag inside one element and close it in another.

Replacing your markup with an actual table doesn't give your desired result, and display:table doesn't work any differently.

http://jsfiddle.net/veYTv/1/