Search code examples
htmlcssfacebook-social-plugins

Social media buttons not lining up correctly

I've positioned my Social Media Div to the right of my Review Div: http://jsfiddle.net/eYQWE/

The problem: the social media buttons within My Social Media div won't stay in a single straight line. They keep dropping below my Review Div.

Any suggestions?

Solution

  • The problem is that the iframe frome facebook gets a width of 450px, wich stretches its parent and makes the buttons appear beneath the text. Try setting a fixed width to the wrappers, something like this:

    #social li {
display: inline-block;
text-decoration: none;
padding: 0 0 0 33px;
float: left;
max-width: 80px;
overflow: hidden;
}​

    I added the last 2 lines and it seems to work just fine now.
    An even better solution would be to drop the iframes entirly and write your own buttons using the API provided by Facebook (or Twitter and G+). This would allow you to style them entirly to your wishes and would probably improve your pageload times. But perhaps that is taking matters a bit to far...

    The updated fiddle can be found here: http://jsfiddle.net/eYQWE/2/