My inline-block elements are not lining up properly

Question

All of the elements within .track-container should line up nice and in line, each side by side, constrained by the 200px height they\'ve been given with no weir

Answer 1

Make sure the line-height ratio on all the elements you're trying to align is the same also. If you're using a mix of DIV, P, H1-5, DT, DD, INPUT, BUTTON tags this will also cause irregularities in vertical alignment depending on what you've already defined elsewhere.

Answer 2

The elements inside .track-container are inline-level boxes in the same line box.

Therefore, their vertical alignment is specified by the vertical-align property:

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

By default, its value is 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.

In this case, they all have baselines, which are calculated according to

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.

The following image clarifies what's happening (the red line is the baseline):

Therefore, you can

• Change the vertical alignment of the elements, e.g. to top, middle or bottom

  .track-container > * {
    vertical-align: middle;
  }
  

  .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;
  }
  .track-container > * {
    vertical-align: middle;
  }

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

• Set the overflow of the elements to something different than visible, e.g. hidden or auto, so that their baseline will be their bottom margin edge.

  .track-container > * {
    overflow: hidden;
  }
  

  .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;
  }
  .track-container > * {
    overflow: hidden;
  }

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

• Make sure the elements have no in-flow line box, so that their baseline will be their bottom margin edge. That is, the contents should be out of flow:

  An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow.

  So for example, you can place the contents of the elements in a wrapper, and style it with float: left:

  .track-container > * > .wrapper {
    float: left;
  }
  

  .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;
  }
  .track-container > * > .wrapper {
    float: left;
  }

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

Answer 3

Or you could set float:left; to 3 elements.

http://jsfiddle.net/fC2nt/

Answer 4

You need to add vertical-align:top to those two elements:

.album-artwork, .track-info {
    vertical-align:top;
}

jsFiddle example

The default vertical alignment is baseline, but you are looking for top instead.

Answer 5

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;
}