Vertically Misaligned CSS Columns

Question

Code: http://cssdeck.com/labs/aqhndehk

I'm creating a page that displays album information. What I want to do is list all of the songs using an ordered list in CSS columns, but when I do so the first column is almost one item lower than the second column. I've attepted the fixes in this thread to no avail. Is there way I can fix this using CSS/HTML?

Answer 1

Give column-count on on ol not div

Check this snippet

.album_container
{
    background: rgba(0,0,0, 0.75);
    position: relative;
    top:0;
    padding-bottom: 250px;
    margin:0;
    margin-bottom: 100px;
    margin-right: 30px;
    left:18px;
}

.album_image
{
    opacity: 1.0;
    position: absolute;
    left: 5px;
    color: #ddd;
    background: rgba(0,0,0, 0.85);
    line-height: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
}

.album_image img{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.album_image h4
{
    line-height: 0;
    margin-left: 5px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: 12pt;
}


.album_image h5
{
    line-height: 0;
    font-style: italic;
    margin-left: 5px;
    font-size: 12pt;
}

/*.album_songs
{
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
    margin:0;
    position: absolute;
    padding-top: 0px;
    left: 270px;
    padding-right: 600px;
    line-height: 0;
    color: #ddd;
    font-size: 12pt;
    top: 0;
    padding-bottom: 210px;
    column-count: 2;
    -moz-column-count: 2;
    column-width: auto;
    column-fill: auto;
    height: 210px;
}*/

.album_songs{
   position: absolute;
   padding-top: 0px;
   margin:0;
    position: absolute;
    padding-top: 0px;
    left: 270px;
  
}
.album_songs ol{
column-count: 2;
    column-gap:50px;
}

        <div class="album_container">
          <div class="album_image">
            <img src="http://got-djent.com/sites/default/files/imagefield_default_images/placeholder_0.png" height="250" width="250">
            <h4>Unknown Album</h4>
            <h5>Unknown Artist</h5>
          </div>
      <div class="album_songs">
      <ol>
      <li>a</li>
      <li>a</li>
      <li>a</li>      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
        <li>a</li>
        
        <li>a</li>
        
        <li>a</li>
        
        <li>a</li>
        
        <li>a</li>
      </ol>
      </div>
    </div>