Adding content to inline-block-div messes up layout in unexpected way

Question

I have a piece of HTML/CSS/JS which behaves in a way I wouldn't expect it to behave. There are three divs displayed as inline-block and given a fixed height and width. Within these divs are further divs which I'm filling with content.

My expectation would be, that the content would start at the top, head to the bottom of the div, and then im some way overflow. At least I've seen it like that in the past.

But for some reason, the code in the snippet I'll post below behaves differently - the two grey boxes move downward. And I'd be thankful for some explanation on why it behaves that way. Maybe it's too obvious for me too see after looking at that code for two hours now and scratching my head.

function demo() {
    document.getElementById("clock5").innerHTML = "test<br/>sometext";
}

.user {
    display: inline-block;
 width: 128px;
 height: 128px;
 font-size: 18pt;
 color: white;
    background-color: #999;
}

.present {
 background-color: green;    
}

<div id="users">
    <div class="user">
        <div class="username">user4</div>
        <div id="clock4"></div>
    </div>
    <div class="user present">
        <div class="username">user5</div>
        <div id="clock5"></div>
    </div>
    <div class="user">
        <div class="username">user6</div>
        <div id="clock6"></div>
    </div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>

Just click the demo-button at the bottom to see what I'm talking about in action.

Nix · Answer 1 · 2015-05-28T11:25:34.260

overflow:hidden will fix it.

Its basically aligning everything to bottom. So either overflow it, or set vertical-align :top. What's the deal with inline-block

Why does overflow fix it? From w3

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

function demo() {
    document.getElementById("clock5").innerHTML = "test<br/>sometext";
}

.user {
    display: inline-block;
    width: 128px;
    height: 128px;
    font-size: 18pt;
    color: white;
    background-color: #999;
}
.clock{
   border: #000 2px solid;
}
.present {
 background-color: green;    
}

<div id="users">
    <div class="user">
        <div class="username">user4</div>
        <div class="clock" id="clock4"></div>
    </div>
    <div class="user present">
        <div class="username">user5</div>
        <div class="clock" id="clock5">some text <br/> </div>
    </div>
    <div class="user">
        <div class="username">user6</div>
        <div class="clock"  id="clock6"></div>
    </div>
</div>
<hr />
<button type="button" onclick="demo()">demo</button>

But why? The content isn't, at least visibly, overflowing. Inspecting the elements in Chrome doesn't show me any padding, margin or content exceeding the height of the containing div. So I actually wan't to understand why your fix works. — Daniel, May 27 '15 at 23:39

score 1 · Accepted Answer · answered May 27 '15 at 23:39

Setting vertical-align property (almost any value, since you fixed the heights) to .user rule should fix the issue.

    function demo() {
        document.getElementById("clock5").innerHTML = "test<br/>sometexttest";
    }

    .user {
        display: inline-block;
     width: 128px;
     height: 128px;
     font-size: 18pt;
     color: white;
        background-color: #999;
        vertical-align: top;
    }

    .present {
     background-color: green;    
    }

    <div id="users">
        <div class="user">
            <div class="username">user4</div>
            <div id="clock4"></div>
        </div>
        <div class="user present">
            <div class="username">user5</div>
            <div id="clock5"></div>
        </div>
        <div class="user">
            <div class="username">user6</div>
            <div id="clock6"></div>
        </div>
    </div>
    <hr />
    <button type="button" onclick="demo()">demo</button>

Adding content to inline-block-div messes up layout in unexpected way

2 Answers2