Why does the size of an element in one table-cell effect alignment of element in another?

Question

I have a question regarding the following HTML (I added the red border to help you see the problem):

<div style="display: table; border: 1px solid red">
    <div style="display: table-row; border: 1px solid red">
        <div style="display: table-cell; border: 1px solid red">
            <div>1</div>
            <div>2</div>
        </div>
        <div style="display: table-cell; border: 1px solid red">
            <div>
                <canvas style="border: 1px solid red"></canvas>
            </div>
        </div>
    </div>
</div>

When I run this on my desktop browsers it looks like "1" appears in its own column, but height-wise it seems to be aligned with the bottom of the canvas.

So here are my questions:

1. Why does "1" appear on the same line as the canvas and "2" on a separate line? "1" and "2" are suppose to appear one the each other starting from the top of the left cell, and the canvas in another unrelated cell.
2. How do you propose to fix this for most browsers so that the numbered items appear next to the canvas and not below it?

P.S. plugging this into jsfiddle seemed to look fine from my android phone browsers

Thank you in advanced!

Answer 1

Demo Fiddle

Why does "1" appear on the same line as the canvas and "2" on a separate line? "1" and "2" are suppose to appear one the each other starting from the top of the left cell, and the canvas in another unrelated cell.

div are block elvel elements, to have them display on the same line you will need to set them to e.g. display:inline-block;

How do you propose to fix this for most browsers so that the numbered items appear next to the canvas and not below it?

Add vertical-align:top; to the parent div

---

As such, revised code would look like:

<div style="display: table; border: 1px solid red;">
    <div style="display: table-row; border: 1px solid red;">
        <div style="display: table-cell; vertical-align:top;border: 1px solid red;">
            <div style="display:inline-block;">1</div>
            <div style="display:inline-block;">2</div>
        </div>
        <div style="display: table-cell; border: 1px solid red;">
            <div style="display: inline-block">
                <canvas style="border: 1px solid red;"></canvas>
            </div>
        </div>
    </div>
</div>

With that in mind, it's usually best practice to separate style from content, and no be reliant on inline CSS, e.g.:

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div>1</div>
            <div>2</div>
        </div>
        <div class='cell'>
            <div>
                <canvas></canvas>
            </div>
        </div>
    </div>
</div>

CSS

.table {
    display:table;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    vertical-align:top;
}
.cell div {
    display:inline-block;
}
.table, .row, .cell, canvas {
    border:1px solid red;
}