Divs just won't align horizontally - html

Question

I'm trying to get 3 divs to align horizontally in my footer. I've tried a bunch of different solutions and have been able to get them very close, but they're just not perfectly aligned.
As of right now, the "biofreeze" element is a bit too high up and the "rocktape" element slightly overlaps the "graston" element. The "graston" element is pretty much exactly where I want it, though.
Playing around with the margins also doesn't seem to work too well.
Here's the code:
#sponsors {
width: 100% vertical-align: top !important;
}
#biofreeze {
float: left;
width: 33%;
}
#graston {
float: left;
width: 33%;
}
#rocktape {
float: left;
width: 33%;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div>
<div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x200" />
</a>
</div>
<div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>

Answer 1

You might consider using inline-block in this case for different heights. Also, vertical-align won't work for floated elements. Plus, there's no ; before vertical-align, so it won't even affect.
#biofreeze,
#graston,
#rocktape {
display: inline-block;
width: 33%;
vertical-align: top;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div><div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x275" />
</a>
</div><div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x100" />
</a>
</div>
</div>
Or if you want all these to be aligned middle, you can use vertical-align: middle instead:
#biofreeze,
#graston,
#rocktape {
display: inline-block;
width: 33%;
vertical-align: middle;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div><div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x275" />
</a>
</div><div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x100" />
</a>
</div>
</div>

Answer 2

100% working code
#sponsors {
width: 100%;
vertical-align: top !important;
overflow:hidden;
border:2px solid grey;
}
#biofreeze{
height:250px;
background-color:#07c;
}
#graston{
height:300px;
background-color:#cc5600;
}
#rocktape{
height:100px;
background-color:#45ba5b;
}
#biofreeze,#graston,#rocktape {
display:inline-block;
float: left;
width: 33%;
}
<div id="sponsors">
<div id="biofreeze">
Height:250px;
</div>
<div id="graston">
Height:300px;
</div>
<div id="rocktape">
Height:100px;
</div>
</div>