htmlcssblogger

Social media DIV issue

I'm making my own Blogger Theme but I have a little problem with the social media bar. Here you have a direct link to my blog. As you can see, the bar is not shown correctly. Here you have the CSS Code 

/* Buttons */

#social {
  width: 100%;
  height:auto;
  padding-top:30px;
  padding-bottom:30px;
  background-color:#D8D8D8;
}


#soc {
  margin-left:10%;
  margin-right:10%;
}

And here you have the HTML Code

  <div id='social'> 

<center>

<div id='soc'> 


    <div class='facebook'><a href='http://www.facebook.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Facebook-icon.png'/></a></div>
    <div class='twitter'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Twitter-icon.png'/></a></div>
    <div class='youtube'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Youtube-icon.png'/></a></div>
    <div class='google'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Google-plus-icon.png'/></a></div>
    <div class='blogger'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Blogger-icon.png'/></a></div>
    <div class='instagram'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Instagram-icon.png'/></a></div>
    <div class='reddit'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Reddit-icon.png'/></a></div>
    <div class='linkedin'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Linkedin-icon.png'/></a></div>

    </div> 

    </center>

</div>

I tried adding the css height:auto; to #social but it didn't work.

Solution

  • Add the following to #social 

    display: table;
margin: 0 auto;

    Since you wish to have them stay within the grey area of #social you need to make it resize accordingly. This is why using min-height or anything else to set a fixed height will not work.