Why is the last inline-block div not vertical-aligning correctly?

Question

The output of my html and css currently looks like this:

What I want to achieve is to have the 3 div's vertical align on the same baseline so it looks like this:

And when a div's content exceeds the max-width it should look like this:

This is the HTML:

<div id="logger-box">
    <div class="logger-box-item" log-level="WARN">
        <div class="logger-box-item-component">APP</div>
        <div class="logger-box-item-level">WARN</div>
        <div class="logger-box-item-message">Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"</div>
    </div>
    <div class="logger-box-item" log-level="INFO">
        <div class="logger-box-item-component">MODULE:LOGIN</div>
        <div class="logger-box-item-level">INFO</div>
        <div class="logger-box-item-message">Login failed</div>
    </div>
    <div class="logger-box-item" log-level="DEBUG">
        <div class="logger-box-item-component">MODULE:LOGOUT</div>
        <div class="logger-box-item-level">DEBUG</div>
        <div class="logger-box-item-message">Login the user out</div>
    </div>
    <div class="logger-box-item" log-level="ERROR">
        <div class="logger-box-item-component">MODULE</div>
        <div class="logger-box-item-level">ERROR</div>
        <div class="logger-box-item-message">Failed to open module</div>
    </div>
</div>

and this the CSS:

#logger-box {
    border: 1px solid #888;
    background-color: #F5F5F5;
}

.logger-box-item {

}

.logger-box-item-component {
    width: 150px;
    margin: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    border-right: 1px solid #CCC;
    border: 1px solid #AAA;
}

.logger-box-item-level {
    width: 80px;
    margin: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #CCC;
    border: 1px solid #AAA;
}

.logger-box-item-message {
    margin: 1px;
    display: inline-block;
    border: 1px solid #AAA;
    max-width: 150px;
}

Each div is set to display: inline-block. It is working with display: inline-flex, however I want to achieve it with inline-block. How can I do that?

can we see some code? and are you open to using tables instead of just divs? — indubitablee, Oct 29 '15 at 17:30
I'll add my code in a moment. No I don't want to use tables :/ — sfandler, Oct 29 '15 at 17:33
In case you're wondering why `text-overflow: ellipsis` isn't working: http://stackoverflow.com/a/33061059/3597276 ... ;-) — Michael Benjamin, Oct 29 '15 at 20:18
@sfandler, It's not working (at least not in the code above). That's why I posted the link reference. demo: http://jsfiddle.net/p4kkh8fo/ — Michael Benjamin, Oct 29 '15 at 23:06
Hm, I tried it again after modifying my code a bit, can't remember what I was changing, and then it worked. I'm still a bit confused haha. — sfandler, Oct 30 '15 at 08:24

score 3 · Answer 1 · answered Oct 29 '15 at 17:38

3

Try vertical-align: top; with display: inline-block;

answered Oct 29 '15 at 17:38

Joe Hany

1,015
1
8
14

1

Sorry for misunderstanding, looks like I made a mistake when trying that solution. – sfandler Oct 29 '15 at 17:46
Yes it is. However I cannot accept two answer, I'm sorry. – sfandler Oct 29 '15 at 18:04

score 2 · Accepted Answer · answered Oct 29 '15 at 17:43

its where you place the vertical-align: top; you put it in the sections. and you make sure that .logger-box-item is a display: block;

#logger-box {

}

.logger-box-item {
    display: block; /*added*/
}

.logger-box-item-component {
    width: 150px;
    margin: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    border-right: 1px solid #CCC;
    border: 1px solid #AAA;
    vertical-align: top; /*added*/
}

.logger-box-item-level {
    width: 80px;
    margin: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #CCC;
    border: 1px solid #AAA;
    vertical-align: top; /*added*/
}

.logger-box-item-message {
    margin: 1px;
    display: inline-block;
    border: 1px solid #AAA;
    max-width: 150px;
    vertical-align: top; /*added*/
}

<div id="logger-box">
    <div class="logger-box-item" log-level="WARN">
        <div class="logger-box-item-component">APP</div>
        <div class="logger-box-item-level">WARN</div>
        <div class="logger-box-item-message">Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"Open module "1"</div>
    </div>
    <div class="logger-box-item" log-level="INFO">
        <div class="logger-box-item-component">MODULE:LOGIN</div>
        <div class="logger-box-item-level">INFO</div>
        <div class="logger-box-item-message">Login failed</div>
    </div>
    <div class="logger-box-item" log-level="DEBUG">
        <div class="logger-box-item-component">MODULE:LOGOUT</div>
        <div class="logger-box-item-level">DEBUG</div>
        <div class="logger-box-item-message">Login the user out</div>
    </div>
    <div class="logger-box-item" log-level="ERROR">
        <div class="logger-box-item-component">MODULE</div>
        <div class="logger-box-item-level">ERROR</div>
        <div class="logger-box-item-message">Failed to open module</div>
    </div>
</div>

Why is the last inline-block div not vertical-aligning correctly?

2 Answers2