Как расположить кнопки социальных сетей в ряд?

[seomedved]

Добавляю на блог кнопки социальных сетей.

Вот код:

<div class="box-content">

<div id="vk" style="float:left;margin:20px 20px 20px 20px;">
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical"});
</script>
</div>

<div id="twitter" style="float:left;margin:20px 20px 20px 20px;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Anton_Medvedev" data-lang="ru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="mail" style="float:left;margin:20px 20px 20px 20px;">
<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'width' : '550', 'show_faces' : 'true'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
</div>

<div id="odnolassniki" style="float:left;margin:20px 20px 20px 20px;">
<a class="odkl-klass-stat" href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>

<div id="fb" style="clear:both;margin:20px 20px 20px 20px;">
<div id="fb-root"></div><script src="http://connect.facebook.net/ru_RU/all.js#appId=224737314221810&xfbml=1"></script><fb:like href="<?php the_permalink(); ?>" send="true" layout="box_count" width="450" show_faces="true" font=""></fb:like>
</div>

</div>

В итоге получается как на скриншоте:

А это далеко не в ряд.

Что я делаю не так и как это исправить?

Помогите пожалуйста!

[psywalker]

Ну для начала неплохо бы понять, чем строчные элементы отличаются об блочных.

[seomedved]

Ну для начала неплохо бы понять, чем строчные элементы отличаются об блочных.

Спасибо за наводку, разобрался.

Но теперь возникает еще одна проблема. Последняя кнопка все равно оказывается под другими. Я не понимаю почему.

Вот поправленный код:

<div class="box-content">

<div id="vk" style="float:left;width:20%;">
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical"});
</script>
</div>

<div id="twitter" style="float:left;width:20%;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Anton_Medvedev" data-

lang="ru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="mail" style="float:left;width:20%;">
<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 

'width' : '550', 'show_faces' : 'true'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
</div>

<div id="fb" style="float:left;width:20%;">
<div id="fb-root"></div><script 

src="http://connect.facebook.net/ru_RU/all.js#appId=224737314221810&xfbml=1"></script><fb:like href="<?php the_permalink(); 

?>" send="true" layout="box_count" width="450" show_faces="true" font=""></fb:like>
</div>

<div id="odnolassniki" style="clear:left;width:20%;">
<a class="odkl-klass-stat" href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>

</div>

А вот то как это все теперь выглядит:

[psywalker]

Значит не помещается в строку. Сделай меньше ширину на 1% у всех.

[seomedved]

Значит не помещается в строку. Сделай меньше ширину на 1% у всех.

Тоже так думал сначала и уменьшал у всех и на 5% все равно последняя слезает вниз.

Даже если оставить например всего 2 кнопки

<div class="box-content">

<div id="vk" style="float:left;width:20%;">
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical"});
</script>
</div>



<div id="odnolassniki" style="clear:left;width:20%;">
<a class="odkl-klass-stat" href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>

</div>

То получиться вот так:

Не знаю почему так выходит.

[psywalker]

clear:left; убери вот это.

[ShumNo]

<div id="odnolassniki" style="clear:left;width:20%;">

Попробуйте вместо clear float

[seomedved]

Спасибо всем за помощь. Все решилось добавлением еще одного пустого дива в конец.

<div class="box-content">

<div id="vk" style="float:left;width:20%;">
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical"});
</script>
</div>

<div id="twitter" style="float:left;width:20%;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Anton_Medvedev" data-

lang="ru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>


<div id="mail" style="float:left;width:20%;">
<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 

'width' : '550', 'show_faces' : 'true'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
</div>

<div id="odnolassniki" style="float:left;width:20%;">
<a class="odkl-klass-stat" href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>

<div id="fb" style="float:left;width:20%;">
<div id="fb-root"></div><script 

src="http://connect.facebook.net/ru_RU/all.js#appId=224737314221810&
xfbml=1"></script><fb:like href="<?php the_permalink(); 

?>" send="true" layout="box_count" width="450" show_faces="true" font=""></fb:like>
</div>

<div id="pusto" style="clear:both;width:0%;"></div>

</div>

[psywalker]

Можно было просто сделать так, и без дива в конце:

.box-conten {overflow: hidden;}

[alb]

а где здесь собственно проблема вёрстки то?)

[psywalker]

а где здесь собственно проблема вёрстки то?)

А что входит в твоё понятие "Проблема вёрстки" ?

[alb]

не, ну тебе виднее канешна )