B Johnson B Johnson - 3 months ago 8
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

inline-block
, i've tried
block
, I've tried
float
, 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.

https://jsfiddle.net/kLbtfqp6/

Answer

Change your css to this:

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


.favicon {
display: block;
}

.footernav, .socialmedia {
  width:50%;
  float: left;
}
.footer img {
  width: 10%;
  display:inline-block; 
}
.footer p {
  width: 50%;
  display:inline-block;
}
Comments