How to float everything to the left without making a new line

Question

I'm having trouble to get my social buttons on my home page to float everything to the left.

Once I have it float left other stuff in the page will be messed.

Here is the code I use

<div style="position:relative;float:left;margin-right: 10px;">

<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=339021756137381";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-counturl="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" class="twitter-share-button" data-count="<?php the_permalink(); ?>" data-via="AppleSiam"></a>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>

The above code will not make any mess to other in the page but the button will be in new line

enter image description here

I found the problem and I will accept the answer soon

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

the above code as you can see data-width="450" were set too long that can't fit in the same line and it has to go to the other line to take all the 450px

Please show the rendered HTML, not the php/html from the server-side script. CSS is most definitely client-side only. — David Thomas, Apr 24 '12 at 13:15
@Ali I mean is the parent element, which contains the buttons wide enough to allow them to both fit in side by side. — David Yell, Apr 24 '12 at 13:16
@DavidYell sorry I just understand your question and that was the problem I posted my problem above and if you want to answer I will be happy to accept your answer — Ali, Apr 24 '12 at 13:26

score 2 · Accepted Answer · answered Apr 24 '12 at 13:13

2

In other words, you want both buttons on the same line? In that case you just need to define a width on the buttons, or on the container they are inside, that allows them to fit side by side. If they have room to sit beside each other, then floating them will not make them go on a new line.

answered Apr 24 '12 at 13:13

Andrew

42,517
51
181
281

Where can I define the width of the buttons? – Ali Apr 24 '12 at 13:14
`
` You were right! – Ali Apr 24 '12 at 13:18

score 1 · Answer 2 · answered Apr 24 '12 at 13:16

1

I'd suggest giving your div an id or a class, and then:

#idOfDivElement,
.classOfDivElement {
    white-space: nowrap;
}

A width would make sense, too. But that'll depend on the remaining contents.

answered Apr 24 '12 at 13:16

David Thomas

249,100
51
377
410

How to float everything to the left without making a new line

2 Answers2

Linked