Cannot align 3 buttons :((

Hello, I am trying to align 3 buttons at http://modapokazy.pl
In the site there were only the FB icon and the FB like button. I managed to somehow align them.

Today I have just added the google plus one button in the code. However it is in the next line. I would like to have the 3 buttons aligned in a row.

This is the code:
<!--here the like button starts -->
<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=267119293321335";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div style="margin:10px 96px 0px;">

<div class="fb-like" data-href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-colorscheme="dark"></div>

</div>
<!--here the like button ends -->

<!--here the facebook icon starts -->
<a href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" target="_blank"><img src="http://modapokazy.pl/wp-content/themes/kingsize/facebookblackandwhite.png" alt="Facebook" style="position:absolute; margin-left:58px; margin-top:-24px;"></a>
<!--here the facebook icon ends -->

<!--here the google plus button starts -->
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-href="http://modapokazy.pl"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'pl'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--here the google plus button ends -->


What should I do? I tried many combinations, but I couldn't manage to do it.

#image1 {
background-image: url('this.png');
height: 65px;
width: 65px;
float: left;
display: block;
}

#image2 {
background-image: url('this.png');
height: 65px;
width: 65px;
float: left;
display: block;
}

#image3 {
background-image: url('this.png');
height: 65px;
width: 65px;
float: left;
display: block;
}



don't forget the no-repeat

sorry, I didn't get it :(

Put the above code in your CSS, and alter it to your needs. Then put the below code in the html.


<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>

hmm, I did it. This is the actual code:

<div id="image1">
<!--here the like button starts -->
<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=267119293321335";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-colorscheme="dark"></div>
<!--here the like button ends -->
</div>

<div id="image2">
<!--here the facebook icon starts -->
<a href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" target="_blank"><img src="http://modapokazy.pl/wp-content/themes/kingsize/facebookblackandwhite.png" alt="Facebook"></a>
<!--here the facebook icon ends -->
</div>

<div id="image3">
<!--here the google plus button starts -->
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-href="http://modapokazy.pl"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'pl'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--here the google plus button ends -->
</div>

Still there is something wrong

Looking at the result of your link the need to be in a container.

put them all inside one div. Such as


#wrap {
edit to your needs
}



<div id="wrap">
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
</div>

Excellent!!! It looks wonderful now.
Thanks so much :)