alinhamento de div

[natant1 1]

Eae galera, blz? Estou com um problema aqui de css que nao consigo resolver.

Eu tenho um código php que vai fazer uma consulta no banco de dados para álbuns de um determinado artista. Eu gostaria que quando retornasse, fosse exibido assim

Mas, quando alguma div tem mais de duas faixas, neste caso a primeira, acontece que a ultima faixa da outra div fica "grudada" com a ultima faixa da primeira.

assim:

Alguem saberia me informar o que esta acontecendo e como posso resolver isso?

Códigos:

https://jsfiddle.net/natant1/94wh5d6u/

<div id="conteudoAlbum">
        <img src="https://upload.wikimedia.org/wikipedia/en/8/89/In_the_Zone.png" />
        
        <span id="TituloAlbum">In The Zone</span>
        
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Toxic</span>
        </a>
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Toxic</span>
        </a>
    </div>
    
    <div id="conteudoAlbum">
        <img src="https://upload.wikimedia.org/wikipedia/pt/9/92/Britney_Circus_Album.png" />
        
        <span id="TituloAlbum">Circus</span>
        
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/lVhJ_A8XUgc/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Circus</span>
        </a>
        
    </div>

#conteudoAlbum{
    position: relative;
    background: white;
    width: 300px;
    height: auto;
    margin-top: 30px;
    margin-right: 40px;
    display: inline-block;
    -webkit-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
    -moz-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
    box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
}
#TituloAlbum{
    position: relative;
    font-family: Arial;
    font-size: 1.4em;
    color: black;
    display: block;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 15px;
}
#faixa{
    position: relative;
    display: block;
    height: 85px;
    width: 100%;
    line-height: 85px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
#faixa:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
#numeroFaixa{
    position: absolute;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Arial;
    font-size: 1.4em;
    color: #45C0CF;
    display: inline-block;
}
#iconnum{
    position: relative;
    left: 33px;
    display: inline-block;
    max-height: 85px;
}
#iconnum img{
    display: inline-block;
    max-height: 85px;
}
#nomeFaixa{
    position: absolute;
    display: block;
    left: 200px;
    font-family: Arial;
    font-size: 1.4em;
    color: black;
    display: inline-block;
}

[Maujor 144]

#conteudoAlbum{

    ...

  display: inline-block;  /* retire */

  float:left; /* acrescente */

    ...

}

[natant1 1]

#conteudoAlbum{
    ...
  display: inline-block;  /* retire */
  float:left; /* acrescente */
    ...
}

Muito obrigado!

A altura da div pai estava como auto mas ai eu adicionei um overflow: hidden; e resolveu o problema. Utilizar o overflow foi uma solução boa? Há uma melhor para nao precisar utilizar uma altura fixa? Obrigado