# Solved: Facebook and Twitter buttons on same line?



## Denys (Nov 25, 2009)

```
<p>
<div class="fb-like" data-href="https://www.facebook.com/pages/Which-Boarding-School/192810007476904" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
<a href="https://twitter.com/UKBoardingHelp" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @UKBoardingHelp</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
```
At the moment they are on two separate lines, but I need them both on the same line with a little space between them. Could someone please do this for me?

Much appreciated,

Denys


----------



## Denys (Nov 25, 2009)

Anyone? Will reward rep!


----------



## colinsp (Sep 5, 2007)

This may work but without seeing the rest of the code and the CSS it is just an educated guess


```
<p>
<div class="fb-like" data-href="https://www.facebook.com/pages/Which-Boarding-School/192810007476904" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true">
<a href="https://twitter.com/UKBoardingHelp" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @UKBoardingHelp</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></p>
```
If it doesn't then it will need some more work and would need a url as a minimum to offer any more advice.


----------



## Denys (Nov 25, 2009)

colinsp said:


> This may work but without seeing the rest of the code and the CSS it is just an educated guess
> 
> 
> ```
> ...


Thank you very much for your reply. Unfortunately it was still on two lines. Here is the url: www.which-boarding-school.com.
I have left it so that only the twitter button shows otherwise the quotes are cut off but I will keep experimenting with your suggestions.

Thanks again,

Denys


----------



## Denys (Nov 25, 2009)

Or in fact this page has both of them on two separate lines:

http://www.which-boarding-school.com/contact-us.html


----------



## Ent (Apr 11, 2009)

I would suggest that you need to use a bit of CSS to do that.

Specify the width of the two sections such that they don't fill the screen space available. 
Then set them both to float left.
So long as there is space for the Twitter section to the right of the Facebook section they should collapse onto the single line.


----------



## Denys (Nov 25, 2009)

Hi there, I have never done proper website designing before and it's all quite new to me. I didn't actually design the site myself and have just been handed the finished product. I have located the CSS files but after researching online I am completely lost as to what to do!

Help is much appreciated!

Thanks.


----------



## Denys (Nov 25, 2009)

Sorry if this asking a lot but I really would like to have this done for my parents' website!


----------



## Ent (Apr 11, 2009)

I can't see the buttons on the page any more.


----------



## Denys (Nov 25, 2009)

Ent said:


> I can't see the buttons on the page any more.


They definitely on two different lines on this page:

http://www.which-boarding-school.com/contact-us.html


----------



## Ent (Apr 11, 2009)

Sorry for the confusion, that was my script blocker preventing them from appearing.


----------



## Denys (Nov 25, 2009)

Ent said:


> Sorry for the confusion, that was my script blocker preventing them from appearing.


Oh OK. Any ideas?


----------



## Ent (Apr 11, 2009)

It looks like you've got it sorted out. :up:
The only modification that I would suggest is placing your style code (width: 200px; clear: none; float: left; ) in the CSS file (styles/wbs.css) that affects all of your site. That way you can apply the same formatting to all the pages instead of having to change it each time. It also marginally reduces the size of each page visited on your site.

You'll learn quickly if you can show such determination and ability in research for all the problems you encounter.


----------



## Denys (Nov 25, 2009)

Ent said:


> It looks like you've got it sorted out. :up:
> The only modification that I would suggest is placing your style code (width: 200px; clear: none; float: left; ) in the CSS file (styles/wbs.css) that affects all of your site. That way you can apply the same formatting to all the pages instead of having to change it each time. It also marginally reduces the size of each page visited on your site.
> 
> You'll learn quickly if you can show such determination and ability in research for all the problems you encounter.


Thank you very much for your help. I have changed the width to 200px, but unfortunately  the text that is meant to go underneath 'Don't just take our word for it....' is next to the buttons. Probably something simple but help is much appreciated!! (Wasn't anything to do with your recommended CSS change by the way, I already had the problem )


----------



## Ent (Apr 11, 2009)

the Clear keyword allows you to force elements onto the next line.
Where your code reads

try replacing it with


----------



## Denys (Nov 25, 2009)

Ent said:


> the Clear keyword allows you to force elements onto the next line.
> Where your code reads
> 
> try replacing it with


Thank you very much! It went onto the next line as you said altghough the quote then floated to the right. I used the <float: left; clear: right;> and it went onto the next line as you can see!

However, the text seems to force itself onto two lines when I try and increase the font size when it could easily fit on the same line?

Why is this? I tried removing the float left command but it stayed the same?

Sorry for continiuing to bombard you with quetsions!


----------



## Denys (Nov 25, 2009)

```
h6
{ 
color:#fff;
padding:0 0 10px 40px;
margin:0;
width: 200px;
clear: right;
font-size:140%;
font-weight:normal;
}
```


----------



## Ent (Apr 11, 2009)

I would imagine it's because you've specified that the h6 "box" has to be 200px wide. When the font increases the length of the text will also increase. If it exceeds 200px it will wrap because there is no more space in the h6 "box", even though there is more space to the right of it. You will see what I mean if you put a border onto h6.

One posibility is to specify the width of h6 in terms of ems. These are a unit of length equal to the width of an upper case M at the current font. If you increase the font, the size of an M also increases, and therefore anything specified in that unit does so too.


----------

