Divs overlapping parent divs - html

Question

I have a contact us page with several divs that act as containers and inside these containers are more divs that hold the content. Here is the structure of the page :
<div class="divBlock">
<div class="spacer10"></div>
<div class="centerDiv">
<div>
<div class="divContactImg">
<div class="branchHeader">Durban</div>
<div class="branchText">89 Joe Slovo Street</div>
<div class="branchText">Durban</div>
</div>
<div class="divContactImg">
<div class="branchHeader">Hillbrow</div>
<div class="branchText">Point Building</div>
<div class="branchText"> StreetG</div>
<div class="branchText">Hillbrow</div>
</div>
<div class="divContactImg">
<div class="branchHeader">Pinetown</div>
<div class="branchText">56 Hill Street</div>
<div class="branchText">Pinetown</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer10"></div>
</div>
The problem is these divs (divContactImg) are overlapping their container div (divBlock). Here is the CSS:
.centerDiv { text-align : center; max-width : 100%; height : auto; margin: 0px auto 0px auto; display: block ; }
.divContactImg {
background-image: url('Images/Contacts_Branches_BG.png');
width:220px;
height:74px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
float:left;
text-align:left;
margin-left: 10px;
margin-top: 1px;
border-radius:5px;
}
.branchHeader {
font-size: 24px;
font-family:Arial Narrow;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;
}
.branchText {
font-size: 12px;
color:#b0b0b0;
margin-left: 10px;
text-transform:uppercase;
}
.branchHeaderOpening {
font-size: 24px;
font-family:Arial Narrow;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;
text-align:center;
}
.divBlock { border-left: thin solid #333; border-right: thin solid #333; border-bottom: thin solid #333; border-radius: 0px 0px 8px 8px;
margin: 0px 10px 0px 10px; background: #000000;}
I have tried setting clear:both on the container divs but no luck. If I take out the float:left then the center div stretches so the children div's fill it, however I need these divs to be displayed three across and this makes them display one per line.

Answer 1

I replaced
.divContactImg {
background-image: url('Images/Contacts_Branches_BG.png');
width:220px;
height:74px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
/*float:left;*/
display:inline-block; **/**ADD**/**
vertical-align:top; **/**ADD**/**
text-align:left;
margin-left: 10px;
margin-top: 1px;
border-radius:5px;
}