CSS Vertical Align Staggered ... should be top

Question

I am having a vertical align issue... I have several div boxes, all with display:inline-block ... and the boxes are vertically aligned top. However, they are all staggered vertically.

And, oddly, when I select the area of the webpage, I see elements inbetween the boxes, that are stretching the area ... but there are no additional elements in the actual code (no divider divs).

enter image description here

/* Related */

#related-wrap {
  width: 100%;
  margin: 20px 0;
}
h2.related-title {
  /* See Author */
}
#related-container {
  width: 100%;
  margin: 10px 0;
  vertical-align: top;
  text-align: center;
  /* background-color:#f5f5f5; */
}
.related-box {
  width: 170px;
  display: inline-block;
  padding: 10px;
  margin: 10px;
  /* background-color:#FAFAFA; */
}
.related-box-first {} .related-box-last {} .related-img {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin-bottom: 10px;
}
.related-img img {
  width: 100%;
  height: auto;
}
.related-txt h3,
.related-txt h3 a {
  width: 100%;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding: 0 5px;
}

<div id="related-wrap">
  <h2 class="related-title">Related Posts</h2>
  <div id="related-container">

    <div class="related-box related-box-first">
      <div class="related-img">
        <a href="/fun-affordable-rugs/">
          <img width="150" height="150" src="images/cce944801a98-150x150.jpeg" class="attachment-thumbnail wp-post-image" alt="cce944801a98" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/fun-affordable-rugs/">Fun Affordable Rugs</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

    <div class="related-box">
      <div class="related-img">
        <a href="/dancing-water-speakers/">
          <img width="150" height="112" src="images/Dancing-Water-Speakers-200x112-150x112.jpg" class="attachment-thumbnail wp-post-image" alt="dancing water speakers" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/dancing-water-speakers/">Dancing Water Speakers</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

    <div class="related-box">
      <div class="related-img">
        <a href="/12-years-a-slave/">
          <img width="135" height="150" src="images/00007402-135x150.jpg" class="attachment-thumbnail wp-post-image" alt="12 years a slave" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/12-years-a-slave/">12 Years A Slave</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

    <div class="related-box related-box-last">
      <div class="related-img">
        <a href="/yogurt-granola-parfaits/">
          <img width="150" height="150" src="images/Yogurt-Parfaits-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="yogurt, granola, fruit, parfaits, bridal" />
        </a>
      </div>
      <!-- .related-img -->
      <div class="related-txt">
        <h3><a href="/yogurt-granola-parfaits/">Yogurt &#038; Granola Parfaits</a></h3> 
      </div>
      <!-- .related-txt -->
    </div>
    <!-- .related-box -->

  </div>
  <!-- #related-container -->
</div>
<!-- #related-wrap -->

this doesn't help answer your question, but i am really curious how those four things could be related. it sounds like the setup for a great joke. — Woodrow Barlow, Jun 12 '15 at 15:00
j08691 ... vertical-align:top. Yes. What's your questions exactly? — Jabbamonkey, Jun 12 '15 at 15:10
Woodrow Barlow ... They are supposed to be in the same category for the blog (I didn't set their taxonomy). — Jabbamonkey, Jun 12 '15 at 15:12

TheOnlyError · Accepted Answer · 2015-06-12T15:15:01.527

3

Add vertical-align: top; to .related-box: https://jsfiddle.net/tcv0pffa/

You're also applying a margin to .related-box, remove this one to get rid of the spaces: https://jsfiddle.net/tcv0pffa/1/

.related-box {
    width:170px;
    display:inline-block;
    vertical-align: top;
    padding:10px;
}

edited Jun 12 '15 at 15:15

answered Jun 12 '15 at 15:06

TheOnlyError

1,441
12
19

Great. I thought the vertical-align:top related to items IN a contain. Not the items themself. Any idea what those "divider" elements are when I select the area? – Jabbamonkey Jun 12 '15 at 15:10

clickbait · Answer 2 · 2015-06-12T15:22:07.347

The .related-boxes should be vertical-align: top, not the #related-container.

You're also applying margin to all sides of the .related-boxes. That's why there's a big space in-between them. Put the margin only on one side so it's not doubled.

With inline-block elements, there'll be a space character between them. That makes the .related-boxes spaces apart 4 pixels more than intended.

To fix this, make the #related-container have font-size: 0.

score 1 · Answer 3 · edited May 23 '17 at 10:30

1

OK, two main issues there.

vertical-align should be set on the inline-block item, not the container.
inline-block also renders white space, you can use the font size trick to get rid of it easily - set font-size:0 on the container and font-size:16px or so on the item.

http://jsfiddle.net/vhmn1ok7/

edited May 23 '17 at 10:30

Community

1
1

answered Jun 12 '15 at 15:10

Stickers

75,527
23
147
186

CSS Vertical Align Staggered ... should be top

3 Answers3