1

I have two spans in a div positioned next to each other. But it gets misaligned the moment I add overflow: hidden to one of the span.

Why does this happen?

.parent {
  border: 1px solid red;
}

.one {
  height: 30px;
  width: 30px;
  background-color: #4784ff;
  display: inline-block;
}

.two {
  height: 30px;
  width: calc(100% - 30px);
  background-color: #08dd0f;
  display: inline-block;
  overflow: hidden;
}
<div class="parent">
  <span class="one">One</span><span class="two">Two</span>
</div>
gerin
  • 392
  • 1
  • 3
  • 11
  • did you get the reason of the behavior? because none of the answser give you the correct reason ... and overflow:hidden is playing a big role here – Temani Afif Jun 30 '18 at 08:10

4 Answers4

2

Try This:-

Use vertical-align: top; 

.parent {
  border: 1px solid red;
}

.one {
  height: 30px;
  width: 30px;
  background-color: #4784ff;
  display: inline-block;
  vertical-align: top;
}

.two {
  height: 30px;
  width: calc(100% - 30px);
  background-color: #08dd0f;
  display: inline-block;
  overflow: hidden;
}
<div class="parent">
  <span class="one">One</span><span class="two">Two</span>
</div>
Mr. Roshan
  • 1,777
  • 13
  • 33
  • Thanks for the answer. Can you tell me why this happens in the first place? – gerin Jun 30 '18 at 06:25
  • Saw this now https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward which explains the "why" part – gerin Jun 30 '18 at 06:36
  • 1
    Also adding `vertical-align: top` to ` the second `span` removes that extra space created at the bottom when adding `vertical-align: top` to the first `span` – gerin Jun 30 '18 at 06:50
  • yup it will remove extra space if you add vertical-align: top in both span. – Mr. Roshan Jun 30 '18 at 06:54
  • I don't think we need it for both spans, only for the one with `overflow: hidden` needs `vertical-align: top`. Interestingly, `vertical-align: bottom` also works – gerin Jun 30 '18 at 06:56
  • 1
    You may use any of the value - top - bottom - center - baseline - inherit as per your requirement. – Mr. Roshan Jun 30 '18 at 07:01
0

Alright so the way that I fixed it for you was using verticle-align:bottom.

The reason this happens is just because css has problems. It has improved greatly, but there are still issues with it. This is a great example of one.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 <div class="parent">
    <span class="one">One</span><span class="two">Two</span>
 </div>
 <style>
  .parent {
     border: 1px solid red;
  }

  .one {
     height: 30px;
    width: 30px;
     background-color: #4784ff;
     display: inline-block;

  }

  .two {
     height: 30px;
    width: calc(100% - 30px);
     background-color: #08dd0f;
     display: inline-block;
     overflow: hidden;
     vertical-align: bottom;

  }
</style>
</body>
Francois van Kempen
  • 144
  • 2
  • 14
  • And the advantage of using `verticle-align: bottom` over `verticle-align:top` is that you dont have a gap between the spans and the redline with `verticle-align: bottom`, that you would have with `verticle-align:top`. – Francois van Kempen Jun 30 '18 at 06:51
  • Actually it works same for `verticle-align:top`, the gap comes when we put `verticle-align:top` to the other span that does not have `overflow: hidden` – gerin Jun 30 '18 at 07:06
  • Ah okay. Stupidly I did no experimentation, and just went by the code snippet. – Francois van Kempen Jun 30 '18 at 07:13
  • Please if you don't know things, don't simply say something like `The reason this happens is just because css has problems` ... There is no CSS problem, all this is logical and very well detailed and explained withing the specification. – Temani Afif Jun 30 '18 at 08:13
0

By default display: inline-block set vertical-align: bottom; so you need to set vertical-align: top for span.

Note: Overflow only work with position, so here you check in snippet it's working fine.

.parent {
  border: 1px solid red;
}

.one {
  height: 30px;
  width: 30px;
  background-color: #4784ff;
  display: inline-block;
}

.two {
  height: 30px;
  width: calc(100% - 30px);
  background-color: #08dd0f;
  display: inline-block;
}
<div class="parent">
  <span class="one">One</span><span class="two">Two</span>
</div>
Manish Patel
  • 3,648
  • 1
  • 14
  • 22
  • It is more to do with `overflow: hidden` than `display: inline-block`. As you can see both are set to inline-block. After asking this question I saw this explaination - https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward – gerin Jun 30 '18 at 06:45
  • The updated snippet does not have `overflow: hidden`. I know it works without `overflow: hidden`. The question was why it doesn't work with `overflow: hidden`. – gerin Jun 30 '18 at 07:03
  • Sorry but your answer is simply wrong ... default alignment is baseline and overlow work with any element, we don't need position – Temani Afif Jun 30 '18 at 08:07
-1

For more specific: vertical-align has about 5 values: - top - bottom - center - baseline - inherit

If your elements have different heights, you will see differents. - top: all elements will be aligned to top - bottom: all elements will be aligned to bottom - center: all elements will be aligned to center - baseline (default): Depends on font-size, line-height, they will be aligned. - inherit: just simple inherit from parent.

And an extra information: If your markup does not provide any spaces between elements, it will works fine, but since they're inline-block, a single new-line or space will breaks them into two words (kind of) and so... between them, there're spaces. No matter how you set width for both (eg. 50% for two) they will still breaks into two or more lines because spaces.

Stev Ngo
  • 94
  • 4
  • thanks! since in my case both has fixed heights, any value to `vertical-align` will do the trick and yes I know the whitespace issue. – gerin Jun 30 '18 at 07:09