title: My inline-block elements are not lining up properly
body: <p>All of the elements within <code>.track-container</code> should line up nice and in line, 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. </p>
  
  <p>What is causing <code>.album-artwork</code> and <code>.track-info</code> 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 this mistake. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="track-container"&gt;
      &lt;div class="position-data"&gt;
          &lt;div class="current-position"&gt;1&lt;/div&gt;
          &lt;div class="position-movement"&gt;2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="album-artwork"&gt;fdasfdsa&lt;/div&gt;
      &lt;div class="track-info"&gt;fdafdsa&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a <a href="http://jsfiddle.net/leejhampton/E6ksT/">JSFiddle</a>.</p>