htmlcssfacebook-likeboxmargins

Facebook like box margins do not center

I'd like to think that I an intermediate when it comes to HTML and CSS but this is a huge problem I haven't been able to resolve.

I am building a website for a business and I can't seem to center the facebook social media plugin "like Box"

here is my html:

<!doctype html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../c9c.css">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Cloud 9 CrossFit - Home</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=141894429309879";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-40292409-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


<nav>
  <li><a href="../index.html">C9C</a></li>
  <li><a href="../pages/about_us.html">About Us</a></li>
  <li><a href="../pages/schedule.html">Schedule</a></li>
  <li><a href="../pages/membership.html">Membership</a></li>
  <li><a href="../pages/wod.html">WOD</a></li>
  <li><a href="../pages/media.html">Media</a></li>
  <li><a href="../pages/links.html">Links</a></li>
  <li><a href="../pages/contactus.html">Contact</a></li>
</nav>

<!-- TemplateBeginEditable name="EditRegion1" -->
<div id="container">
  <div id="img"><img src="../img/image place holder.jpg" alt="" name="imgmain" width="983" height="435" id="imgmain"></div>
  <div class="fb-like-box" data-href="https://www.facebook.com/Cloud9CrossFit" data-width="973" data-height="510" data-show-faces="true" data-stream="true" data-header="false"></div>
  <div class="quickboxes">
    <div id="box1"><a href="http://www.crossfit.com" target="_blank"><img src="../img/Crossfit.png" width="960" id="img1" longdesc="http://www.navyreserve.navy.mil/Pages/default.aspx"></a></div>
    <div id="box2"><a href="http://www.roguefitness.com" target="_blank"><img src="../img/Rogue logo" alt="rogue fitness" width="940" id="img2"  ></a></div>
    <div id="box3"><a href="https://www.facebook.com/Cloud9CrossFit" target="_blank"><img src="../img/facebook logo.png" alt="facebook" width="73" id="img3"></a></div>
  </div>
</div>
<!-- TemplateEndEditable -->
<footer>footer stuff | sitemap | etc | © 2013 Cloud 9 CrossFit</footer>
</body>
</html>

The CSS:

/* CSS Document */

body {
    font: Calibri;
    background-color: #EFEFEF;
    width: 1120px;
    height: auto;
    margin: auto;
    background-image:url(img/Name%20sideways.png);
    background-position:0px 20px;
    background-repeat:no-repeat;
    background-attachment:fixed;

}
#fb-root {
    display: none;
}
nav {
    margin: 20px auto;
    list-style: none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    font-weight:550;
    letter-spacing: -0.5px;
    font-size: 13px;
    text-shadow: 0 -1px 3px ##E9E8E9;
    width: 974px;
    height: 30px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    text-align: center;
    -webkit-animation: showMenu 1s;
    position: relative;
    color: white;   
}
nav li {
    display: block;
    float: left;
    border-right: 1px solid #999;
    border-left: 1px solid #E9E8E9;
    width: 120px;
    height: 30px;
    border-bottom: 1px solid #D5D5D5;
    border-top: 1px solid ##F5F5F5;
    background-image: linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -o-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -moz-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -webkit-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -ms-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.23, #999999),
    color-stop(0.57, #CFCDCF),
    color-stop(0.89, #F5F5F5)
);
    background-color: #5f5f5f; /* Fallback */
    margin:0 auto;
}

nav li:hover {
    background-image: linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -o-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -moz-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -webkit-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -ms-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.23, #696869),
    color-stop(0.57, #8F8F8F),
    color-stop(0.89, #C7C7C7)
);
    background-color: #383838; /* Fallback */
    -moz-box-shadow: inset 0 1px 2px 2px #666;
    -webkit-box-shadow: inset 0 1px 2px 2px #666;
    box-shadow: inset 0 1px 2px 2px #666;
}
nav li:active {
    background-image: linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -o-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -moz-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -webkit-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -ms-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.23, #262626),
    color-stop(0.57, #525052),
    color-stop(0.89, #C7C7C7)
);

    background-color: #383838; /* Fallback */
    -moz-box-shadow: inset 0px 0px 5px 5px #31304A;
    -webkit-box-shadow: inset 0px 0px 5px 5px #31304A;
    box-shadow: inset 0 0 5px 5px #31304A;
}
nav li a {
    color: black;
    text-decoration: none;
    text-align: center;
    display: block;
    line-height: 30px;
    outline: none;
}


nav li:first-child {
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    border-left: none;
}
nav li:first-child a img {
    vertical-align: middle;
    margin-top: -2px;
}
nav li:last-child {
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    border-right: none;


}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
 from {
opacity: 0;
top:-20px;
}
to {
    opacity: 1;
}


#container {
width: 980px;
height:auto;
margin:auto;    
}
#img {
    width: 980px;
    margin: 0 auto;

}
#imgmain {
    display: block;
    border-radius: 8px;
    opacity: 0.8;
    -moz-box-shadow: 0px 0px 10px #999;
-webkit-box-shadow: 0px 0px 10px #999;
box-shadow: 0px 0px 10px #999;
}

.fb-like-box {
    display: block;
    width: 980px;
    height: auto;
    text-align: center;
    margin: 15px auto;



}
.quickboxes {
    width: 974px;
    margin: 0 auto;
}
#box1, #box2, #box3 {
    width: 33%;
    display: inline-block;
    overflow: hidden;
    margin: 15px auto;
    text-align: center;
}
#img1, #img2 {
    width: 60%;
    margin: 5px auto;
}

footer {
    height:18px;
    width: 974px;
    margin: 5px auto;
    padding: 5px 0px;
    text-align: center;
    border-top: thin #999 solid;
    border-bottom: thin #999 solid;
}

The problem is that while the image and link boxes are centered, the Facebook like box will not center.

I don't want to absolute position because if the user changes the window size it get's distorted. I know this is a margin issue. But I'm not sure why.

This is simple CSS stuff so why does it fail to work properly?

enter image description here

I was able to fix it by adding

padding-left: 70px;
Solution

  • Hi a slight modification of Stefan's answer did the trick for me:

    div.fb-like {
    width: 100% !important; 
    position: relative;          
    text-align:center !important;
}

<div class="fb-like disp_fb_like" data-send="false" data-layout="box_count" data-width="90" data-show-faces="false" data-action="recommend"></div>