Two divs same line: why overflow: hidden; causes vertical offset?

Question

I have two divs sitting one next to the other on the same line with display: inline-block; https://jsfiddle.net/3q0kbv2k/. When I put overflow: hidden; on the first div, the second is moved down by a small offset.

Html:

<!-- CODE ON ONE LINE ON PURPOSE -->
<!-- WHITESPACES BREAK LAYOUT -->
<div class="foo">foooooooooooooooooooooo</div><div class="bar"><div>bar</div></div>

Css:

.foo {
    display: inline-block;
    width: 9%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
}

Why is this happening?

I found this old question that depicts the very same scenario and contains a workaround, but I'm interested in understanding why this happens, is it a bug or normal behaviour?

It's described at [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow); "**overflow: hidden The content is clipped and no scrollbars are provided.**" I'm not sure that's the answer you're looking for though? — Patrick, Mar 05 '15 at 20:58
why just put `overflow:hidden` on `.bar` and they'll line up? — inorganik, Mar 05 '15 at 21:00
possible duplicate of [Why is this inline-block element pushed downward?](http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward) — showdev, Mar 05 '15 at 21:03
I think it's an inline-block thing. You can fix it by adding `div { vertical-align: top; }`, although that's not an explanation to why it's happening. — Chad, Mar 05 '15 at 21:05
Just add `overflow: hidden` to BOTH, problem solved. The question @showdev provided contains your explanation, look at the bold text in accepted answer. — EternalHour, Mar 05 '15 at 21:08

score 6 · Accepted Answer · answered Mar 05 '15 at 21:06

From the spec:

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.

Your foo div has an overflow "other than visible," so its baseline is the "bottom margin edge."

Your bar div has visible overflow, so its baseline is the baseline of its text.

You can fix this by giving them the same vertical-align style:

.foo {
    display: inline-block;
    width: 5%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
    vertical-align: middle;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
    vertical-align: middle;
}

<div class="foo">foooooooooooooooooooooo</div>
<div class="bar"><div>bar</div></div>

This is also explained in the [duplicate](http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward#answer-9289377), though your post is arguably more concise. — showdev, Mar 05 '15 at 21:09
Ahh, I didn't see your comment until after I posted. Looks like a good read. — Rick Hitchcock, Mar 05 '15 at 21:10

Two divs same line: why overflow: hidden; causes vertical offset?

1 Answers1