CODEWITHSUNDEEP
htmlcss
riverrunner
riverrunner

Reputation: 115

Alignment of Divs

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.

Upvotes: 1

Views: 76

Answers (5)

Emil Borconi
Emil Borconi

Reputation: 3467

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?

Upvotes: 0

DF_
DF_

Reputation: 3983

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.

Upvotes: 2

cluster1
cluster1

Reputation: 5752

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!

Upvotes: 0

nemvalid
nemvalid

Reputation: 1

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.

Upvotes: 0

owencm
owencm

Reputation: 8894

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.

Upvotes: 0

Related Questions