Espace inexplicable sous div

Question

J'ai trois divs l'un à côté de l'autre, mais lorsque le contenu d'un ou de plusieurs div devient trop grand, cela crée un espace supplémentaire sous la div. Cela provoque le div n'est pas aligné verticalement. Je n'ai aucune idée de comment empêcher cela de se produire.

HTML:

<div id="recents"> 
<div id="upload" class="box"> 
    <img class="cover" onclick="changeHash2(&quot;track=1328030460&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/track_images/uploads/1328030460-Cover.jpg"> 
    <span>Miss May I<br> 
    Monument (Guitar) v1 and xtra te<br> 
    Track</span> 
    <span class="tmp"><a href="download.php?uri1328030460" target="_blank"><img src="http://ttrcustoms.us/iCons/download.png"></a> <img onclick="changeHash2(&quot;track=1328030460&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/iCons/info.png"> <img onclick="trackpopup(&quot;1328030460&quot;);" src="http://ttrcustoms.us/iCons/rate.png"></span> 
</div> 
<div id="spacer"></div> 
<div id="upload" class="box"> 
    <img class="cover" onclick="changeHash2(&quot;track=1327679448&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/track_images/uploads/1327679448-Cover.jpg"> 
    <span>Miss May I<br> 
    Monument Coop and xtra te<br> 
    Track</span> 
    <span class="tmp"><a href="download.php?uri1327679448" target="_blank"><img src="http://ttrcustoms.us/iCons/download.png"></a> <img onclick="changeHash2(&quot;track=1327679448&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/iCons/info.png"> <img onclick="trackpopup(&quot;1327679448&quot;);" src="http://ttrcustoms.us/iCons/rate.png"></span> 
</div> 
<div id="spacer"></div> 
<div id="upload" class="box"> 
    <img class="cover" onclick="changeHash2(&quot;track=1308426773&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/track_images/uploads/1330860552-EmbraceTheGutter.jpg"> 
    <span>The Autumn Offering<br> 
    Embrace The Gutter and xtra te<br> 
    Track</span> 
    <span class="tmp"><a href="download.php?uri1308426773" target="_blank"><img src="http://ttrcustoms.us/iCons/download.png"></a> <img onclick="changeHash2(&quot;track=1308426773&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/iCons/info.png"> <img onclick="trackpopup(&quot;1308426773&quot;);" src="http://ttrcustoms.us/iCons/rate.png"></span> 
</div> 

CSS:

.box{ 
    margin: auto; 
    padding: 0 2em 2em 2em ; 
    border: 1px solid #FA0; 
    color: #FFF; 
    -moz-border-radius: 13px; 
    -webkit-border-radius: 13px; 
    border-radius: 13px; 
    background-color: #222; 
    font: 0.9em Calibri, Verdana, sans-serif; 
} 

a:link, a:visited{ 
    color: #C6CDE0; 
    text-decoration: none; 
} 
a:hover{ 
    color: #fff; 
    text-decoration: underline; 
} 
#recents{ 
    position: relative; 
} 
#upload{ 
    position: relative; 
    background-color: #404040; 
    display: inline-block; 
    padding: 7px; 
    width: 30%; 
    margin: 0px; 
    -moz-transition: background-color 0.25s; 
    -o-transition: background-color 0.25s; 
    -webkit-transition: background-color 0.25s; 
    transition: background-color 0.25s; 
} 
#upload:hover{ 
    background-color: #303030; 
} 
#upload span.tmp{ 
    position: absolute; 
    bottom: 7px; 
    right: 7px; 

} 
#upload .cover{ 
    width: 64px; 
    height: 64px; 
    float: left; 
    margin-right: 3px; 
    moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border-radius: 7px; 
} 
#upload img{ 
    cursor: pointer; 
    -moz-transition: opacity 0.25s; 
    -o-transition: opacity 0.25s; 
    -webkit-transition: opacity 0.25s; 
    transition: opacity 0.25s; 
} 
#upload img:hover{ 
    opacity: 0.5; 
} 
#spacer{ 
    width: 1%; 
    height: 12px; 
    display: inline-block; 
}​ 

exemple jsFiddle: http://jsfiddle.net/QvGdA/

Answer 1

Si vous regardez attentivement, vous peut voir que tous les mots de Track de toutes les boîtes sont alignés dans un li ne, ils (généralement la dernière ligne de la boîte donnée) forment le baseline d'un inline-block. Démonstration avec une "règle" div ajouté: http://jsfiddle.net/QvGdA/2/

Ajouter vertical-align: top; à #upload, et il est fixé, voir http://jsfiddle.net/QvGdA/1/