One element's vertical alignment varies based on content of adjacent element

Question

Here's what I am unable to recreate:

Here's the issue I'm having, "BBC" appears to jump up/down based on whether sign in included in the next div block. I can't get the border to stay within the 40px or get the "sign in" or "BBC" text to center or the BBC to center. I spent a couple hours testing various items, I wasn't able to get it to work--It would be very much appreciated if you could explain the code and the behavior that is taking place (why the HTML is rendering the way it is). Why do the BBC and left border of Sign In overflow the 40px height?

html, body, p {
  margin: 0;
  padding: 0;
}
.container {
  width: 1000px;
  margin: 0 auto;
}
.top-nav-bar {
  height: 40px;
  border-bottom: 1px firebrick solid;
  margin-bottom: 30px;
}
.top-nav-logo-area {
  display: inline-block;
  padding-right: 25px;
}
.logo {
  background-color: black;
  color: white;
  font-family: monospace;
  font-size: 25px;
}
.top-nav-link-div {
  display: inline-block;
  border-left: 1px #cccccc solid;
  height: 40px;
}

<!-- WITH CONTENT NEXT TO LOGO -->

<div class="container top-nav-bar">

  <div class="top-nav-logo-area">
    <span class="logo">B</span>
    <span class="logo">B</span>
    <span class="logo">C</span>
  </div>

  <div class="top-nav-link-div">
    hello
  </div>
</div>


<!--WITHOUT CONTENT NEXT TO LOGO -->

<div class="container top-nav-bar">

  <div class="top-nav-logo-area">
    <span class="logo">B</span>
    <span class="logo">B</span>
    <span class="logo">C</span>
  </div>

  <div class="top-nav-link-div">
    <!-- empty -->

  </div>
</div>

You're dealing with `inline-block` elements. The problem is their default `vertical-align` value: `baseline`. Add `vertical-align: top` to `.top-nav-logo-area`. http://stackoverflow.com/a/36975280/3597276 — Michael Benjamin, May 29 '16 at 15:29
@Michael_B that's a super helpful link! `vertical-align: top` definitely solves the problem of alignment, but `vertical-align: middle` does not seem to respond. Could you provide some insight to that? — Govind Rai, May 29 '16 at 15:52

score 1 · Answer 1 · answered May 29 '16 at 15:43

I think this is what you want to achieve:

JSFiddle

I used float left so the logo isn't affected by the text. I also made some enhancements you will like:

html,
body,
p {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    width: 1000px;
    margin: 0 auto;
}

.top-nav-bar {
    height: 40px;
    border-bottom: 1px firebrick solid;
    margin-bottom: 30px;
}

.top-nav-logo-area {
    display: inline-block;
    padding: 7px 7px 0 20px;
    float: left;
}

.logo {
    background-color: #222;
    color: white;
    font-family: monospace;
    font-size: 22px;
    padding: 0 5px;
    margin: 0 0 0 3px;
    line-height: 26px;
    cursor: default;
}

.top-nav-link-div {
    display: inline-block;
    border-left: 1px #cccccc solid;
    height: 40px;
    line-height: 40px;
    padding: 0 7px;
}

<div class="container top-nav-bar">

  <div class="top-nav-logo-area">
    <span class="logo">B</span><span class="logo">B</span><span class="logo">C</span>
  </div>

  <div class="top-nav-link-div">
    hello
  </div>
</div>

That works! Could you please provide further commentary as to why you used `float` instead of `inline` (why is it a better choice?) and also why you need to use both 'line-height: 40px` and `height: 40px`. — Govind Rai, May 29 '16 at 16:01

Michael Benjamin · Accepted Answer · 2016-06-04T12:53:11.690

You're dealing with inline-block elements.

The default value of the vertical-align property, which applies to inline-level elements, is baseline. This takes the logo container (.top-nav-logo-area) and aligns its baseline (or bottom margin edge, if there is no baseline), with the baseline of the parent box (.top-nav-bar).

Except, you have constrained the height of the parent with height: 40px (the natural height is 46px).

This forces the logo box to overflow the bottom of the parent.

Whether or not the height of the parent is shortened, the vertical-align property should work on the logo container.

From the spec:

vertical-align

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

baseline

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

middle

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

* { box-sizing: border-box; }

html, body, p {
    margin: 0;
    padding: 0;
}

.container {
    width: 1000px;
    margin: 0 auto;
}

.top-nav-bar {
    height: 40px;             /* height constrained; natural height 46px */
    border-bottom: 1px firebrick solid;
    margin-bottom: 30px;
}

.top-nav-logo-area {
    display: inline-block;
    padding-right: 25px;
    border: 1px dashed red;
    vertical-align: top;     /* other options include `baseline`, `bottom` and `middle` */
}

.logo {
    background-color: black;
    color: white;
    font-family: monospace;
    font-size: 25px;
}

.top-nav-link-div {
    display: inline-block;
    border-left: 1px #cccccc solid;
    height: 40px;
}

<!-- WITH CONTENT NEXT TO LOGO -->
<div class="container top-nav-bar">
    <div class="top-nav-logo-area">
        <span class="logo">B</span>
        <span class="logo">B</span>
        <span class="logo">C</span>
    </div>
    <div class="top-nav-link-div">
        hello
    </div>
</div>

<!--WITHOUT CONTENT NEXT TO LOGO -->
<div class="container top-nav-bar">
    <div class="top-nav-logo-area">
        <span class="logo">B</span>
        <span class="logo">B</span>
        <span class="logo">C</span>
    </div>
    <div class="top-nav-link-div"><!-- empty --></div>
</div>

jsFiddle

How were you able to determine 46px as the natural size of the box? — Govind Rai, May 29 '16 at 16:30
In Chrome dev tools, unclick the `height: 40px` and check Computed tab. — Michael Benjamin, May 29 '16 at 16:31
Thank you! One final question: why does the computed height end up being 46px? The `.logo` class only has a `font-size` of 25px; even if default `line-height` is 120%, the box will only be 30px. This will explain why 'BBC' is baselining at 46px by default. — Govind Rai, May 29 '16 at 18:53
The mystery height is coming from the text div in the first row ("Hello"). If you remove the `height: 40px` from `.top-nav-link-div`, then remove the `height: 40px` from `.top-nav-bar`, the only spacing left is the `margin-bottom: 30px`. Remove that and all spacing is gone. — Michael Benjamin, Jun 04 '16 at 12:51

Medda86 · Answer 3 · 2016-05-29T15:25:15.683

-1

Nor sure what the issue is, but you can try add box-sizing:border-box; -moz-box-sizing:border-box; to your elements :)

Also try float:left; it might solve it.

Please add a jsfiddle too, is easy to solve the problem for you then.

edited May 29 '16 at 15:25

answered May 29 '16 at 15:23

Medda86

1,582
1
12
19

One element's vertical alignment varies based on content of adjacent element

3 Answers3

vertical-align

jsFiddle

`vertical-align`