View Full Version : simple?

01-14-2012, 06:52 PM
simple brain fart maybe, but I have tried every way I can think of to center this fb code for the like and send buttons with no luck.


01-14-2012, 07:50 PM
You need to set the left and right margins of the div you want to center to auto and give the div a width. Something like this.

.fb_iframe_widget {
margin: 0 auto;
width: 300px;

You might need to adjust the width.

bTW, you have what some folks refer to as divitis, using divs for everything. Your menu, for instance, could be accomplish with an unordered list rather than nearly a dozen separate divs.

01-14-2012, 08:07 PM
yes I definitely have divitis! but just a couple months ago, I was using no css, no divs, and nasty nested tables. so I am making the jump from 2000 to 2012 as quickly as possible. This particular site is a small site I did for a friend, and trying to update the code for her since she is making changes to the site again. for now I like to be able to physically see all the div placement and obvious overflow as I'm learning.

As for setting margins I have tried that and have seen no affect. I am obviously missing something or a typo I dont see.

<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=276002839080672";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="fb-root"></div>
<div class="fb-like" data-href="https://www.facebook.com/pages/Aspire-Business-Consulting/105089866204988" data-send="true" data-width="550" data-show-faces="false" data-colorscheme="dark"></div>

#fb-root {
width: 550px;
margin: auto;

.fb-like {
width: 550px;
margin: auto;

01-14-2012, 09:57 PM
the .fb_iframe_widget class is from the code generated on your page. It worked on my test in FireFox

01-14-2012, 10:07 PM
not sure where to do that... its not in my code. it must be calling it from the remote script

01-15-2012, 01:58 AM
The only way I was able to center it was to condense it and use a chunk of old code. which is what I trying to get away from. if anyone can tell me a better way I would love to know how, for this and future use.

Condensed the code, dropped the css class as it wasnt working to center it using margins set to auto or specific size.

<div align="center">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=276002839080672&amp;xfbml=1"></script><fb:like href="http://www.facebook.com/pages/Aspire-Business-Consulting/105089866204988" send="true" width="500" show_faces="false" action="like" colorscheme="dark" font="arial"></fb:like>

01-15-2012, 02:07 AM
Looks like you've changed things since I first looked at it. Basically just put everything you want to center in a div and then set the left and right margin to auto and give it a width about the size of the content.

01-15-2012, 02:22 AM
yes still playing with it. the send option didnt work so I removed it. with margins set to auto and a set width it was still aligned left.

There must have been a mistake in the code I missed because its working now. Thanx again.

01-15-2012, 07:08 AM
I know this is a mess but I'm trying top clean it up. First problem I am trying to address is the div width. I have set the width to 800pxbut it still expands to the wrapper width of 1000px.

beyond that is a huge list of errors on validation. many of which dont seem to make any sense.

If someone could take a glace at it I would appreciate it.


01-15-2012, 10:50 AM
I think your approach of trying to amend chunks of code is making this job harder. That services page is a really simple page I'd just start from scratch.

The code is mess, loads longer than it needs to be, full of inline style and presentational markup.

I'd build again from scratch and try to keep as clean as possible ensuring you select the most appropriate HTML element for the job.

01-15-2012, 06:13 PM
thank you. unfortunately that was from scratch. A couple of quick questions tho. any idea why I cant contain the main content in an 800px wide div wrapper? I know the script wont validate, but what about the meta keywords and description she has there?