Why is vertical-align affecting the previous (same scope) element?

Question

<div id="hero" class="wrapper">
  <div id="hero-left">
    <div id="selectors-div">
      <span>Some text</span>
    </div>
  </div>
  <div id="hero-right">
  </div>
</div>

As you can see, #hero-left, comes before #hero-right, but for some reason, #hero-left is being pushed down all the way to the bottom until the text in the <span> aligns with the baseline of #hero-right.

I thought it was very odd behaviour since this hasn't happened to me before, so I started messing around with setting vertical-align: top, but even stranger is that nothing happened when I set that property value in any of the relevant elements... eventually, I randomly tried placing that same property value into #hero-right, and Voila... by setting that value to the latter element, the former is affected...

Why does this happen? I was taught that vertical-align only affects itself and inherently the position of its children (based off itself), yet it won't affect itself, its parent, its parent's parent... What am I missing?

WORKING EXAMPLE:

body {
  font-family: 'Kanit', sans-serif;
  margin: 0;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

#header {
  height: 100px;
  display: flex;
}

#header-left {
  margin: auto 0 auto 25px;
}

#header-left>img {
  height: 50px;
  margin: auto 0;
}

#header-right {
  margin: auto 0 auto auto;
}

#header-list {
  list-style-type: none;
  display: inline-block;
  margin: auto 0;
}

#header-list>li {
  display: inline;
  font-weight: bold;
  font-size: 13px;
}

#header-list>li>a {
  text-decoration: none;
  color: black;
}

#header-list>li>a:hover {
  color: #2C85D0;
}

#vertical-spacer {
  height: 26px;
  width: 1px;
  margin: 0px 5px;
  display: inline-block;
  background-color: darkgray;
  vertical-align: middle
}

#navbar {
  height: 60px;
  background-color: #252835;
}

.menu-left {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 0;
}

.menu-left>li {
  text-decoration: none;
  display: inline-block;
  height: 100%;
}

.menu-item-div {
  height: 100%;
  width: 200px;
  border-right: 1px solid darkgray;
}

.menu-item-div>span {
  line-height: 60px;
  margin-left: 20px;
  font-size: 18px;
  color: white;
}

#section-type {
  height: 100px;
  background-color: darkgrey;
}

#section-type>span {
  line-height: 100px;
  margin-left: 20px;
  font-size: 35px;
}

#hero {
  height: 1000px;
  background-color: red;
  font-size: 0;
}

#hero-left {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-color: blue;
  font-size: 13px;
}

#hero-right {
  display: inline-block;
  width: 70%;
  height: 100%;
  background-color: orange;
  font-size: 18px;
}

#selectors-div {
  height: 100%;
}

#selectors-div>span {}

<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">

<div id="header" class="wrapper">
  <div id="header-left">
    <img src="https://pcbuilding2017.files.wordpress.com/2017/03/pcpartpicker.png?w=669&h=144&crop=1" alt="">
  </div>
  <div id="header-right">
    <ul id="header-list">
      <li><span style="font-weight: normal;">Welcome</span></li>
      <li><a href="">Username</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Inventory</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Favorite Parts</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Saved Parts Lists</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Log Out</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Canada</a></li>
      <li><span id="vertical-spacer"></span></li>
    </ul>
  </div>
</div>

<div id="navbar" class="wrapper">
  <ul class="menu-left">
    <li>
      <div class="menu-item-div">
        <span>Desktop</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>Laptop</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>All-in-One</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>Mini</span>
      </div>
    </li>
  </ul>
</div>

<div id="section-type" class="wrapper">
  <span>Choose a Desktop</span>
</div>

<div id="hero" class="wrapper">
  <div id="hero-left">
    <div id="selectors-div">
      <span>a</span>
    </div>
  </div>
  <div id="hero-right" style="vertical-align: top;">
  </div>
</div>

BROKEN EXAMPLE

body {
  font-family: 'Kanit', sans-serif;
  margin: 0;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

#header {
  height: 100px;
  display: flex;
}

#header-left {
  margin: auto 0 auto 25px;
}

#header-left>img {
  height: 50px;
  margin: auto 0;
}

#header-right {
  margin: auto 0 auto auto;
}

#header-list {
  list-style-type: none;
  display: inline-block;
  margin: auto 0;
}

#header-list>li {
  display: inline;
  font-weight: bold;
  font-size: 13px;
}

#header-list>li>a {
  text-decoration: none;
  color: black;
}

#header-list>li>a:hover {
  color: #2C85D0;
}

#vertical-spacer {
  height: 26px;
  width: 1px;
  margin: 0px 5px;
  display: inline-block;
  background-color: darkgray;
  vertical-align: middle
}

#navbar {
  height: 60px;
  background-color: #252835;
}

.menu-left {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 0;
}

.menu-left>li {
  text-decoration: none;
  display: inline-block;
  height: 100%;
}

.menu-item-div {
  height: 100%;
  width: 200px;
  border-right: 1px solid darkgray;
}

.menu-item-div>span {
  line-height: 60px;
  margin-left: 20px;
  font-size: 18px;
  color: white;
}

#section-type {
  height: 100px;
  background-color: darkgrey;
}

#section-type>span {
  line-height: 100px;
  margin-left: 20px;
  font-size: 35px;
}

#hero {
  height: 1000px;
  background-color: red;
  font-size: 0;
}

#hero-left {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-color: blue;
  font-size: 13px;
}

#hero-right {
  display: inline-block;
  width: 70%;
  height: 100%;
  background-color: orange;
  font-size: 18px;
}

#selectors-div {
  height: 100%;
}

#selectors-div>span {}

<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">

<div id="header" class="wrapper">
  <div id="header-left">
    <img src="https://pcbuilding2017.files.wordpress.com/2017/03/pcpartpicker.png?w=669&h=144&crop=1" alt="">
  </div>
  <div id="header-right">
    <ul id="header-list">
      <li><span style="font-weight: normal;">Welcome</span></li>
      <li><a href="">Username</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Inventory</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Favorite Parts</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Saved Parts Lists</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Log Out</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Canada</a></li>
      <li><span id="vertical-spacer"></span></li>
    </ul>
  </div>
</div>

<div id="navbar" class="wrapper">
  <ul class="menu-left">
    <li>
      <div class="menu-item-div">
        <span>Desktop</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>Laptop</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>All-in-One</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>Mini</span>
      </div>
    </li>
  </ul>
</div>

<div id="section-type" class="wrapper">
  <span>Choose a Desktop</span>
</div>

<div id="hero" class="wrapper">
  <div id="hero-left">
    <div id="selectors-div">
      <span>a</span>
    </div>
  </div>
  <div id="hero-right">
  </div>
</div>

</body>

</html>

your first snipper does not show any problem of alignment as the #hero-right is fully empty, did you forget something ? — robinvrd, Jul 20 '18 at 08:40
duplicate of : https://stackoverflow.com/questions/35529582/vertical-align-not-working-on-inline-block — Temani Afif, Jul 20 '18 at 08:41
`id` must be unique. `vertical-spacer` is used in every span. — samuellawrentz, Jul 20 '18 at 08:41
and of : https://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements — Temani Afif, Jul 20 '18 at 08:41
@TemaniAfif Not a duplicate, I do NOT WANT to use vertical-align, I am forced to, to rectify an issue, those other posts are trying to use it. — J. Doe, Jul 20 '18 at 08:42
you are not having an *issue* but a logical behavior that you simply need to understand and those links will help you ... the example you called *broken* is not broken, but logical — Temani Afif, Jul 20 '18 at 08:43
@TemaniAfif I read those posts and replies but don't see an answer to my question. They specifically refer to the behaviour of the children or parent of the element, mine doesn't have to do with the parent or child. — J. Doe, Jul 20 '18 at 08:50
hero-left and hero-right and sibling so children of the same parent and both are aligned to the baseline of the parent and the baseline of the parent is defined by the text inside it and you have text only inside the hero-left — Temani Afif, Jul 20 '18 at 08:52
and if you want another trick, remove vertical-align and add `overflow: hidden;` to hero left it will also fix the issue — Temani Afif, Jul 20 '18 at 08:56
here is another question that can also help you understand the baseline : https://stackoverflow.com/questions/39373787/css-set-baseline-of-inline-block-element-manually-and-have-it-take-the-expected/39373946#39373946 — Temani Afif, Jul 20 '18 at 08:58
Now I get it, thanks for the help! This has helped me understand how vertical-align works in practise a lot better! — J. Doe, Jul 20 '18 at 09:00

Why is vertical-align affecting the previous (same scope) element?

0 Answers0