B Johnson B Johnson - 1 year ago 48
CSS Question

Aligning divs inline while leaving the content top to bottom in footer

Sorry if this is a duplicate, but I've been looking around for the last hour and can't find any solutions that work.

I have three divs that I need to line up left to right for my footer, but the content inside the divs needs to remain top to bottom. Here's a picture of the mockup that I made:

Footer Example

I've tried

, i've tried
, I've tried
, I've tried them all together, and a host of other stuff and I can't figure it out. They still line up top to bottom. Any help would be appreciated, here's a fiddle with all the code for the footer.


Answer Source

Change your css to this:

.footer {
background-color: #5c0e13;
color: white;
display: inline-block;
width: 100%;

.favicon {
display: block;

.footernav, .socialmedia {
  float: left;
.footer img {
  width: 10%;
.footer p {
  width: 50%;