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

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

  
    
  
      
  1
      
  2
    
    
  fdasfdsa
    
  fdafdsa
  

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

  
    
  
      
  1
      
  2
    
    
  fdasfdsa
    
  fdafdsa
  

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

  
    
  
      
  1
      
  2
    
    
  
      fdasfdsa
    
    
  
      fdafdsa