Need help with button placement

[ricksmith]

At the bottom of this post I’d like to get the 2 social buttons to line up correctly, but not sure how. I’m using a child theme, so hopefully someone can suggest some css I can put in there. Thanks so much!

[Senff]

Link please.

[ricksmith]

@senff
Oh sorry! [Here’s the link](http://rickwsmith.com/blog/noahs-dad-twitter/ “noah’s dad”). I’d really like to use the tall buttons in that call to action box at the bottom of the post if posable. But I change it in the plug in, it changes it up top as well, which doesn’t look good. Any thoughts on how I could do that?

[sheepysheep60]

I would add this css to your current style sheet or classes in the style sheet:

.socialize-buttons{
position:relative;
}

.socialize-button{
position: absolute;
top: 50px;
}

that will line up both the buttons but they will be on top of each other. To move one of them to the right a bit, I’d add another bit of css like:

.socialize-button:last{
left: 100px;
}

[sheepysheep60]

By giving the surrounding div a position of relative, it will let you place the other elements freely inside it – if they have position: **absolute**. The next bit just says place them 50px from the top, then that last bit just says “of the two you just placed, place the last one of them 100px from the left hand edge.”

[ricksmith]

@sheepysheep60 Thanks for your help, and for the incredible explanation. It looks like it still isn’t lining up correctly. Any thoughts?

[sheepysheep60]

No worries, sorry it didn’t work out. I think :last is only meant for list elements, my bad.

.socialize-buttons {
position: absolute;
top: 56px;
}

.socialize-button {
position: relative;
float: left;
width: 100px;
}

.socialize-containter {
position: relative;
}

Try the above, so this time we position the socialize buttons absolutely – under the text – then we give the individual buttons widths and use float to make them sit next to each other.

[ricksmith]

@sheepysheep60 Thanks! It looks great. Do you know to use use the vertical buttons , and put them on to the left of the content, where they were? I think that would actually look better.

So basically keep everything as it was, but use vertical buttons instead of horizontal ones? Thanks.

[Author]

Posts