CODEWITHSUNDEEP
css
Ali
Ali

Reputation: 10453

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

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

Upvotes: 0

Views: 582

Answers (2)

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 1

Andrew
Andrew

Reputation: 43113

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.

Upvotes: 2

Related Questions