Footer Icons Not Lining Up In Position

Question

I can't seem to get my social media icons to line up top to bottom with the accompanying words. I am looking for any suggestions on how I might be able to go about this? I've tried display: block, etc, but I can't seem to get it to work. I think if I could get it to line up top to bottom I could figure the rest out.

Here's a fiddle with all the code:

https://jsfiddle.net/o4aajsmu/

Edit: here's a pic of what's going on right now

Answer 1

Are you saying you want the icons at the bottom of the entire area?

If so, here's a couple of things. 1) clear: all doesn't exist (its both)

You should move the social icons div after the right hand column and add clear: left to the social icons div. Here's an updated fiddle

Demo

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

.favicon, .footernav, .socialmedia, .socialmediaicons {
  float: left;
}

.favicon {
	margin-left: 1%;
	margin-top: 1%;
	margin-right: 1%;
}

.footernav a {
	text-decoration: none;
	color: white;
	transition: .3s color;
}

.footernav a:hover {
	color: #db1421;
}

.socialmedia {
	margin-left: 40%;
  float: right;
}

.social {
	width: 20px;
}

.socialmedia a {
	text-decoration: none;
	color: white;
	transition: .3s color;
}

.socialmedia a:hover {
	color: #db1421;
}

.socialmediaicons {
	clear: left;
	display: block;
}

		<div class="footer">
			<div class="favicon">
				<a href="index.html"><img id="favicon" src="assets/favicon.png"></a>
			</div>
			<div class="footernav">
				<a href="index.html"><p>Home</p></a>
				<a href="ourteam.html"><p>Our Team</p></a>
				<a href="weddings.html"><p>Weddings</p></a>
				<a href="events.html"><p>Events</p></a>
				<a href="contact.html"><p>Contact</p></a>
			</div>
			<div class="socialmedia">
				<a href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a>
				<a href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a>
				<a href="https://twitter.com/sbvideography"><p>@sbvideography</p></a>
				<a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a>
				<a href="mailto:inquiries@yourstorybookmemory.com"><p>inquiries@yourstorybookmemory.com</p></a>
			</div>
      <div class="socialmediaicons">
				<a href="https://www.facebook.com/yourstorybookmemory/"><img class="social" src="assets/facebook.png"></a>
				<a href="https://www.instagram.com/yourstorybookmemory/"><img class="social" src="assets/instagram.png"></a>
				<a href="https://twitter.com/sbvideography"><img class="social" src="assets/twitter.png"></a>
				<a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><img class="social" src="assets/youtube.png"></a>
				<a href="mailto:inquiries@yourstorybookmemory.com"><img class="social" src="assets/mail.png"></a>
			</div>
		</div>

Answer 2

If i'm understanding correctly, you're overthinking it. Why wouldn't you put all of your anchor tags in the same div and then use display:inline-block on the text anchor tags? Check out this fiddle.

<div class="socialmedia">
    <a href="https://www.facebook.com/yourstorybookmemory/"><img class="social" src="assets/facebook.png"></a>
    <a class="socialText" href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a><br/>
    <a href="https://www.instagram.com/yourstorybookmemory/"><img class="social" src="assets/instagram.png"></a>
    <a class="socialText" href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a><br/>
    <a href="https://twitter.com/sbvideography"><img class="social" src="assets/twitter.png"></a>
    <a class="socialText" href="https://twitter.com/sbvideography"><p>@sbvideography</p></a><br/>
    <a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><img class="social" src="assets/youtube.png"></a>
    <a class="socialText" href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a><br/>
    <a href="mailto:inquiries@yourstorybookmemory.com"><img class="social" src="assets/mail.png"></a>
    <a class="socialText" href="mailto:inquiries@yourstorybookmemory.com"><p>inquiries@yourstorybookmemory.com</p></a><br/>
</div>

.socialText{
  display:inline-block;
}