Why is inline-block div changing position on hover?

Question

I have two divs side by side in inline-block style. When changing overflow on hover from hidden to visible using pure CSS, why do divs change position?

.overlaping {
  width: 14.2%;
  height: 50px;
  font-size: 1rem;
  display: inline-block;
  text-align: center;
  line-height: 200%;
  color: black;
  position: relative;
  background: yellow;
  overflow: hidden;
}

.overlaping:hover {
  overflow: visible;
}

.wrapper {
  height: 200px;
  width: 100%;
  background: lightblue;
}

<div class="wrapper">

  <div class="overlaping">
    Some longer text
  </div>

  <div class="overlaping">
    Other div
  </div>

</div>

I know inline-block is causing it, but is there some way to mitigate changing position and keeping the display inline-block at the same time?

@AndreiGheorghiu it jumps because overflow:hidden change the baseline of the element to be the bottom edge. Making it visible will make the baseline to consider the text (the default behavior) — Temani Afif, May 02 '19 at 08:14
@TemaniAfif technically this is not a duplicate since the problem is not the same although answer is. In my example I **change** the overflow property. If I had a text which doesn't overflow in my divs and both divs had either `overflow: hidden` or `overflow: visible` they would always be aligned properly. — Slaven Semper, May 02 '19 at 09:29
it's a duplicate because the problem is due to vertical alignment (baseline by default) + overflow that change the baseline. The first duplicate explain that the default alignment is baseline and the second one is a deep explanation about how baseline and vertical alignment behave when we change different properties such as overflow. If you understand this then you will be able to understand your issue thus it's a duplicate — Temani Afif, May 02 '19 at 09:32
I understand what you're trying to say. But none of them mentions changing `overflow` property. **Change** is crucial which gives it another context. Both variants working: https://jsfiddle.net/e35ochxa/1/ and https://jsfiddle.net/e35ochxa/. And the one not working: https://jsfiddle.net/76p51bk4/. If I don't **change** the `overflow` property with `:hover` selector everything is aligned properly. — Slaven Semper, May 02 '19 at 10:07
`If I don't change the overflow property with :hover selector everything is aligned properly.` --> so you confirm that it's a duplicate because the overflow propety has changed AND the overflow property is changing the baseline. the duplicate explain that overflow has something to do with vertical alignment and baseline. If you understand this you will understand that *changing* this property is creating the issue and you have to consider aligning your element differently — Temani Afif, May 02 '19 at 10:12
from the first duplicate : `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.` --> it's very clear that overflow other than visible change the baseline and in your code you have overflow other than visible. If this is not a duplicate for you than I don't know what you will call a duplicate. — Temani Afif, May 02 '19 at 10:13
I can't really argue with a guy who has done 270 projects in 5 years with a 100% client satisfaction. You win. — Slaven Semper, May 02 '19 at 10:43

score 3 · Accepted Answer · answered May 02 '19 at 07:46

3

By default inline-blocks have vertical-align: baseline, which is why it jumps around if another height changes. To fix this, add

.overlaping {
  vertical-align: top;
}

answered May 02 '19 at 07:46

elveti

2,316
4
20
27

score 0 · Answer 2 · answered May 02 '19 at 07:45

Probably you should change the height instead of the overflow setting.

Also add the min-height and float to the boxes.

.overlaping{
  width: 14.2%;
  min-height: 50px;
  height: 50px;
  font-size: 1rem;
  display: inline-block;
  text-align: center;
  line-height: 200%;
  color: black;
  position: relative;
  background:yellow;
  overflow:hidden;
  float: left;
}

.overlaping:hover{
  height: auto;
}

.wrapper{
  height:200px;
  width:100%;
  background:lightblue;
}

<body>
<div class="wrapper">

<div class="overlaping">
Some longer text ddg dfg sdfg sdfg sdfgsdfgsdfgsdfg sdfgsdfgsd fgsd fgsd fgsdfgsdfgs dfg sert sertsertsertgs dfgsdfg dfgsdfg
</div>

<div class="overlaping">
Other div
</div>

</div>
</body>

score -1 · Answer 3 · answered May 02 '19 at 07:55

Modify .overlapping style as shown below

.overlaping {
  width: 14.2%;
  height: 50px;
  font-size: 1rem;
  float:left;
  margin-right:5px;
  text-align: center;
  line-height: 200%;
  color: black;
  position: relative;
  background: yellow;
  overflow: hidden;
}

Why is inline-block div changing position on hover?

3 Answers3