Inline-block elements are staggering down after the first sibling div

Question

I am running into an issue that I am unsure of the cause. I had three boxes that I want lined up in a horizontal line, which they are until I added my title and descriptions inside of the boxes. Why would adding the titles and descriptions make this staggering effect?

You can see what it is doing inside of my snippet.

#home-img-block-wording-container {
  width: 100%;
  height: 400px;
  border: 1px solid black;
}
.home-img-wording-blocks {
  width: 33%;
  height: 100%;
  text-align: center;
  border: 1px solid black;
  display: inline-block;
}
.home-img-wording-block-title {
  padding-top: 20px;
  font-size: 2em;
}
.home-img-wording-block-description {
  padding: 25px 20px 0 20px;
  font-size: 1.2em;
  color: #adadad;
}

<div id="home-img-block-wording-container">
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">WEB DESIGN</div>
    <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">ECOMMERCE</div>
    <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
    <div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
  </div>
</div>

Josh Crozier · Accepted Answer · 2016-01-22T02:56:28.477

The problem is that the text in each inline-block .home-img-wording-blocks element is being aligned to the baseline of the previous box.

As stated by the relevant specification:

10.8 Line height calculations: the line-height and vertical-align properties

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 worth pointing out that the default value for the vertical-align property is baseline. To fix your problem, you could align the element to the top by adding vertical-align: top:

#home-img-block-wording-container {
  width: 100%;
  height: 400px;
  border: 1px solid black;
}
.home-img-wording-blocks {
  width: 33%;
  height: 100%;
  text-align: center;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}
.home-img-wording-block-title {
  padding-top: 20px;
  font-size: 2em;
}
.home-img-wording-block-description {
  padding: 25px 20px 0 20px;
  font-size: 1.2em;
  color: #adadad;
}

<div id="home-img-block-wording-container">
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">WEB DESIGN</div>
    <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">ECOMMERCE</div>
    <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
  </div>
  <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
    <div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
  </div>
</div>

Perfect. Thank you for the help! – Becky Jan 22 '16 at 02:49 — Becky, Jan 22 '16 at 02:49

score 0 · Answer 2 · answered Jan 22 '16 at 02:49

0

Just set vertical-align: top; to the .home-img-wording-blocks item

answered Jan 22 '16 at 02:49

Leonardo

314
1
8

score 0 · Answer 3 · answered Jan 22 '16 at 02:49

A solution by hiding the overflow of your divs and making sure no unintentional margins or padding are being applied:

* {
  margin:0;
  padding:0;
}
#home-img-block-wording-container {
    width: 100%;
 height: 400px;
 border: 1px solid black;
}
.home-img-wording-blocks {
    width: 33%;
 height: 100%;
 text-align: center;
 border: 1px solid black;
 display: inline-block;
    overflow:hidden;
}
.home-img-wording-block-title {
 padding-top: 20px;
 font-size: 2em;
}
.home-img-wording-block-description {
 padding: 25px 20px 0 20px;
 font-size: 1.2em;
 color: #adadad;
}

<div id="home-img-block-wording-container">
            <div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">WEB DESIGN</div>
    <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
   </div><div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">ECOMMERCE</div>
    <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div>
   </div><div class="home-img-wording-blocks">
    <div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
    <div class="home-img-wording-block-description">MARKETING STRATEGIES</div>
   </div>
        </div>

Inline-block elements are staggering down after the first sibling div

3 Answers3