Small icon help

HTML & CSS
2

Hi,
You can use display:table; on your footer to get the results your after.
Then set up your left and right divs as display:table-cell;

This could also be done with flexbox if your interested.

Here’s the table version. It will need anchors in it if you plan on having the icons as links.

988×114 360 Bytes


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Icons</title>
<style>
footer {
   display:table;
   width:100%;
}
.left, .right {
   display:table-cell;
   text-align:center;
   padding:30px 0;
}
.left {
   width:70%;
   background:#53352f;
   border-right:2px solid green;
}
.right {
   width:30%;
   min-width:180px;
   background:#684d48;
}
footer img {
   display:inline-block;
   vertical-align:middle;
   margin:5px 3px;
   background:#eef;
}
</style>
</head>
<body>

<footer>
   <div class="left">
      <img src="email.png" class="emailicon" width="40" height="30" alt="">
   </div>
   <div class="right">
      <img src="insta.png" class="instaicon" width="40" height="30" alt="">
      <img src="fbicon.png" class="fbicon" width="40" height="30" alt="">
      <img src="twitter.png" class="twittericon" width="40" height="30" alt="">
   </div>
</footer>

</body>
</html>