Left Alignment

[jbridges87]

Hey everyone, I have two divclass toolbars that I'm trying to align properly on my page.
One to the left and the other to the right.

The one to the left is working fine by default, but I can't seem to get the second divclass to shift all the way to the right of the page.
I did try the solution outlined, here, but that didn't seem to work.

I tried adding the tags above and below the divclass code from within index.template.php, but it didn't work. [I saved each time and tested both ways]
Programming is not my background though, so there's a good chance I may have just placed something wrong...

Any guidance is appreciated.

[Deaks]

One of the most amazing things would be ability to see what you added in the css and the index.template.php files as we can give alot of help but alot of it will not help much.

[jbridges87]

I tried the code within the site I linked.

<div style="float: left;">Left Div</div>
and
<div style="float: right;">Right Div</div>

[Deaks]

and where are you wanting these blocks to be?

More information the better

[Mick.]

Try this ?

Code Select Expand


<div class="something-right">
                            whatever goes here
</div>
<div class="something-left">
                            whatever goes here
                </div>


The css;

Code Select Expand


.something-right {
float: right;
}
.something-left {
float: left;
}


[jbridges87]

Right above the top category where the share buttons are. [site in sig]

I want to move on of them to the right side of the page.

[Deaks]

I do not see the share buttons but you could use a mod like TP or SP and only use left and right blocks

[Antechinus]

Lol. Looks like Bootstrap spaghetti code, or something similar. The amount of markup for one bloody button is hilarious.

The basic problem you have is that the anchors are defined as inline-block, and are all sitting in the same parent div. This means they all line up from left to right.

So, exactly what result are you after? Are you trying to split the FB and Twitter buttons out to the right? Or are you trying to do something else?

[Mick.]

Lol. Looks like Bootstrap spaghetti code, or something similar. The amount of markup for one bloody button is hilarious.

The basic problem you have is that the anchors are defined as inline-block, and are all sitting in the same parent div. This means they all line up from left to right.

So, exactly what result are you after? Are you trying to split the FB and Twitter buttons out to the right? Or are you trying to do something else?

I think he wants the two donated buttons to the right. My guess is since those are css served somewhere else he would have to use !important to force it.?

[Antechinus]

Should be able to just add a float: right; to those two buttons if that's what he's after. As long as no floats are defined elsewhere it should work without !important.

Code Select Expand

.at-svc-facebook {float: right;}

That works in Stylus.

[Mick.]

Should be able to just add a float: right; to those two buttons if that's what he's after. As long as no floats are defined elsewhere it should work without !important.

Code Select Expand

.at-svc-facebook {float: right;}

That works in Stylus.

yup. See my earlier post

[Antechinus]

Yeah but you don't need extra divs or classes. It works if you just add a float to the existing class for that button.

The parent div is full width anyway, so any children floated right just whizz over to that side.

[Mick.]

Yeah but you don't need extra divs or classes. It works if you just add a float to the existing class for that button.

that's the thing... I think that's a sharethis app? That's why I posted and figure it out from there

[jbridges87]

Yes, that's right.
I'm looking to keep the share buttons where they are [twitter, facebook, etc], but move the donations buttons to the right side.

[drewactual]

add to the bottom of your main css:

Code Select Expand


.row .addthis_inline_share_toolbox{float:left;max-width:80%;padding:3em;}
.row .addthis_tipjar_inline_8pfy{float:right;border:1px solid #ccc; border-radius:.5em;margin:.5em;padding:1em;background:#eee;}


play with it until you find what you like. 

[Antechinus]

Why on earth would you need all of that? The buttons are already styled. All it should need is this:

Code Select Expand

.addthis_default_style .at300b {float: right;}

Seems to work perfectly when I tried it.

[drewactual]

Because instead of taking a tone of superiority and sneer I tried to help him amd dressed it up a touch too...

The arrogance on this board by many of its elders is just dumb...

[Antechinus]

My 2c is giving them the simplest code that will do what they want is helpful. If they want extra things, they'll ask for those too.

I'm not being arrogant. People ask because they don't know enough coding to get the result they want. If I give them all sorts of stuff they don't need, they won't know which bits do the things they want to do and which bits do something else entirely. OTOH, if I give them the simplest code which will do exactly what they want to do, then it will usually be obvious which bits are doing what, at least in the case of simple requests like this. This means they learn something, and learn it pretty easily.

[jbridges87]

That reminds me of a Linux 101 class I took in College, where my Prof was explaining the workings of various commands, and we learned about the 'Less' command, and how it was superior to the 'more' command, in many ways.

10 years later, and I still remember the saying, 'Less is more'.

@Antechinus - Can I just place that one line of code above and/or below the divclass within index.template.php?

[Mick.]

This didn't work?

Code Select Expand


.something-right {
float: right;
}
.something-left {
float: left;
}


Code Select Expand


<div class="something-right">
  <div class="addthis_tipjar_inline"></div>
</div>

<div class="something-left">
  <div class="addthis_inline_share_toolbox"></div>
</div>