1

I am trying to align two social feedback buttons as below:

<div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://myaddress/<?php echo $reference; ?>" data-count="none" data-dnt="true">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <div class="fb-share-button" data-href="http://myaddress/<?php echo $reference; ?>" data-type="button"> </div> </div>

The problem is, the buttons keep getting displayed like this: enter image description here

For some reason they are not aligned vertically. What I want, is for them to be down near the bottom left corner of the page, and separated by an adjustable number of pixels and of course, vertically aligned. In the future, I may add more buttons. What is the best solution for this?

I have tried a number of things with divs and CSS to no avail. The last time I had to do any of this it was all done with tables but that is old-hat now. Thanks.

Improve this question

5 Answers 5

Reset to default
2

I'm not a fan of any of these answers as they don't tackle the problems that you have.

You actually already mentioned a fix yourself for the vertical alignment of the buttons. The easiest fix would be to just add a vertical-align attribute to the twitter class as so:

.twitter-share-button { vertical-align: bottom; width: 90px !important; }

The width !important tag is an unfortunate solution to the fact that twitter injects an iframe into your html and makes it very hard to style normally. I have made a jsfiddle for you to see the results here. Adjusting the width like this is the only thing that will change the padding between the two buttons.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the tip. I was thinking about 'forcing' a vertical-align on the twitter button but it was way down my list. My thoughts were that I must be doing something wrong in the first place if this were required. I definitely need to read up more on CSS and HTML5.
0

Your best bet for a quick fix is to use position:relative on whichever button you want to move slightly. You can then set top:5px, left:5px or whatever values you like on the div to tweak its position relative to where it was.

Improve this answer

2 Comments

I'll give this a shot also thanks. But what is the position relative to exactly? I.e.: where is the origin?
The origin is the position on screen where the button would be rendered if it was display:block, aka. where it is right now.
0

I recommend you to place your buttons in a list (ul-li). Then you can set li's css to "display: inline-block", and play with li's height/padding in your css.

Improve this answer

1 Comment

I've put: ul li { display:inline-block; height:20px; } and then I've wrapped the buttons in: <ul> <li> </li> <li> </li> <ul> but still the same result.
0

In CSS:

#footer { width: 100%; /* Places the button-bar on the bottom of the page. */ position: fixed; bottom: 0; /* ------------------------------------------------ */ } .button { float: left; /* First number == margin for the top AND the bottom. Second number == margin for the left AND the right. */ margin: 50px 20px; }

In HTML:

<!-- Make a surrounding footer-div! --> <div id="footer"> <!-- Use a CSS-Class for your buttons! --> <div id="twitter" class="button"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://myaddress/<?php echo $reference; ?>" data-count="none" data-dnt="true">Tweet</a> </div> <div id="facebook" class="button"> <div class="fb-share-button" data-href="http://myaddress/" data-type="button">Facebook-Button</div> </div> </div>

Copy and paste my code into a page and accustom it to your needs!

Improve this answer

Comments

0

Your missing a </div> I'm not sure if you wanted to have nested div or just 2 divs, guessing 2 divs, so:

<div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://myaddress/<?php echo $reference; ?>" data-count="none" data-dnt="true">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> <div class="fb-share-button" data-href="http://myaddress/<?php echo $reference; ?>" data-type="button"> </div>

I see you want nested div, so the problem wasn't missing closer. Can you provide a fiddle?

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.