Side by Side buttons

[davidduizer]

Hey Everyone,

I'm not sure if this post is in the correct forum but I believe it will be simple for someone to solve.

I simply want to have my pinterest and facebook buttons side-by-sided (right now they are stacked).

Here is my code:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a><div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Thanks in advance!

David

[abduraooft]

Try

<a style="float:left" href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>

[davidduizer]

Thanks so much for the reply. It didn't seem to work though.

Here's an example URL:

http://www.damyhealth.com/2012/02/co...minute-recipe/

Thanks,

David

[dylanbaumannn]

EDIT: i just looked at your code, you'll actually need to apply the float:left; to your <iframe> tag that you have & the <div> you have for your facebook button.

iframe{
float:left;
}
.fb-like fb_edge_widget_with_comment fb_iframe_widget{
float:left;
width:150px;
}

You also need to change the width of your "fb-like fb_edge_widget_with_comment fb_iframe_widget" <div> because it's sent to 450px right now, which is causing the button not to float since it cannot fit on the line above it. If you reduce the width to about 150px you should be fine.

[davidduizer]

That doesn't seem to work either. So they are just stacked really tightly both floating left.

David

[dylanbaumannn]

the width of your iframe around your facebook button is still set to 450px, so it is unable to float next to your pintrest button.

You'll need to change the width of the iframe if you want the button to sit next to the pintrest button

[davidduizer]

They are on the same line now but not level. They seem staggered.

Any ideas?

Thanks!

David

[dylanbaumannn]

I'm not entirely sure what all else you have going on, so the quickest fix I can think of would be to apply:

 
div{
margin-top:-3px;
}

it's a quick-fix that doesn't directly address the issue, but it'll fix it

[dylanbaumannn]

also, try adding:

position:relative;

to both of the iframe and the <div>.

Floating basically says, "hey, if there is room up to the left/right of you then you should sit there instead". However sometimes with statically positioned elements they will stop short of their desired position based on the previous element's height/content/whatnot. By changing the position to relative you're telling it to sit relative to where it should be instead of where it currently is.

[dylanbaumannn]

You got it working I see