Govind Rai Govind Rai - 6 months ago 16
HTML Question

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

Here's what I am unable to recreate: enter image description here

link to jsfiddle for reference

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>




Answer

You're dealing with inline-block elements.

The default value of the vertical-align property, which applies to inline-level elements (and table-cell elements), is baseline.

This means that the logo container (.top-nav-logo-area) is aligned with the baseline of the parent container (.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.

However, some values, including middle, will continue to overflow the bottom of the parent because of the reduced height.

* { 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

Learn more: