CODEWITHSUNDEEP
htmlcss
kihu
kihu

Reputation: 852

Why does display:inline-block inside a table cell changes vertical alignment of following cells

Check out this fiddle:

http://jsfiddle.net/cu4u5xo5/2/

    .tbl {
        display: table;
        width:"100%";
    }
    .trow {
        display:table-row;
    }
    .ul {
        white-space: nowrap;
    }
    .col {
        display:table-cell;
    }
    .col1 {
        background:#77c;
    }
    .col2 {
        background: #faa;
    }
    .col3 {
        background: #afa;
        vertical-align: top;
    }
    .inside {
        display:inline-block;
        /* change this to block */
    }

<div class="tbl">
        <div class="trow">
            <div class="col1">
                <div class="inside">
                    <ul>
                        <li>INSIDE ONE</li>
                        <li>INSIDE ONE</li>
                    </ul>
                </div>
            </div>
            <div class="col2">COLUMN TWO</div>
        </div>
    </div>

Divs have display table, table-row and table-cell.

When I set .inside to display:inline-block, following cells behave as if vertical-align:bottom. I can overwrite it by setting vertical-align:top, but I'm just wondering why placing a div with inline-block in one cell changes a property of another cell?

Upvotes: 1

Views: 8000

Answers (2)

r3mainer
r3mainer

Reputation: 24567

According to the CSS specifications (my emphasis):

The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

If you style the contents of the first cell as block, then it is no longer an inline element. As a result, the vertical-align property will have no effect, and the contents of the second cell will end up in their default position (aligned to the top of the cell).

Upvotes: 1

Alex Wilson
Alex Wilson

Reputation: 2419

try it DEMO

.inside {
    display:inline-block;
    vertical-align:top;
}

Upvotes: 0

Related Questions