CSS Inline-Block Elements Not Lining Up Properly

Feast your eyes on this fiddle. For those of you interested in having the code in the question, here’s my HTML (simplified from the actual code):

<div class="track-container">
  <div class="position-data">
      <div class="current-position">1</div>
      <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

and here’s my CSS:

.track-container {
  padding:0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}

.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.current-position, .position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}

.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}

To me, it seems like all of the elements within track-container should line up nice and inline-blocky, each side by side, constrained by the 200px height they’ve been given with no weird margins or padding. Instead, you have the strangeness that occurs in the aforementioned fiddle. What is causing album-artwork and track-info to get pushed halfway down the page and how can I fix it? Also, I acknowledge that a table may be a better way of approaching this whole setup, but I want to figure out the problem from the code above so I can learn from my clearly erroneous CSS thinking.


solution

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.

This is a common issue involving inline-block elements. In this case, the default value of the vertical-align property is baseline. If you change the value to top, it will behave as expected.

Updated Example

.position-data { vertical-align: top; }