Trying to understand the spacing issues that arise when tiling a series of divs within a parent div. Here is a link to the fiddle for reference: http://jsfiddle.net/SNSvU/4/. Below is the code snippet:
<div id="prioritiesWrapper">
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
<div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
CSS
#prioritiesWrapper {
color: white;
background-color: blue;
margin: 0 auto;
}
#prioritiesWrapper .priority .img {
float: left;
height: 50px;
margin: 0 15px 0 0;
}
#prioritiesWrapper .priority .title {
margin: auto 0;
}
#prioritiesWrapper div.priority {
width: 350px;
height: 80px;
display: inline-block;
margin: 10px 30px;
padding: 10px;
background-color: black;
text-align: left;
font-weight: bold;
line-height: 2em;
}
The spacing between divs seems consistent only if the priority titles on a row have similar lengths (one or two lines), causing alignment issues when they differ in length. How can I achieve uniform spacing regardless of the content length?