amanda f. amanda f. - 7 months ago 10
HTML Question

Divs just won't align horizontally

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

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>

Comments