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?
overflow:hidden
on.bar
and they'll line up? – inorganik Mar 5 '15 at 21:00div { vertical-align: top; }
, although that's not an explanation to why it's happening. – Chad Mar 5 '15 at 21:05overflow: hidden
to BOTH, problem solved. The question @showdev provided contains your explanation, look at the bold text in accepted answer. – EternalHour Mar 5 '15 at 21:08