Question

I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).

For some reason, Drupal adds a panel searator CSS class:

I tried to modify my CSS file as following:

.panel-separator { display: none; }

but it only produced this:

There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.

How do I get the button to align horizontally? Thanks.

Update

I have set a lot of width and I also added float: left;:

.GYPO_social_buttons {
    padding-top: 91px;
    width: 200px;
    float: left;
}

.GYPO_share_this {
    width: 90px;
}

.GYPO_google_plus_one {
    width: 40px;
}

Here is the enclosing div according to firebug (I am using Firefox):

Update II

Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!

.GYPO_share_this {
    width: 90px;
    float: left;
}

.GYPO_google_plus_one {
    width: 40px;
    float: left;
}

Answer 1

You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn’t have enough width to accommodate this next to mail icon.