Right align then left align on one line

[webdesignessex]

I’ve seen loads of answers as to how you can left align, then right align elements on a page but none the other way round: right align then left align.

Can anybody help?

[Paulie_D]

Can you explain further what you mean?

I’m having trouble understanding what it is you are after.

[webdesignessex]

If it were a table, the first column elements would be right aligned, then the second column elements would be left aligned.

Hope that makes sense Paulie_D.

[Paulie_D]

Is this actually tabular data? Then use a table.

Is it a layout thing? Is this text that is to be aligned in alternating posts/divs etc.

There are a lot of ways using classes, columns etc….so the answer is, it depends on what it is you are trying to do.

[webdesignessex]

Alternating DIVs ideally.

Not really wanting to make it a table but that was the best way of explaining it.

[Paulie_D]

A couple of ways.

One using classes, another with pseudo-classes. :http://codepen.io/anon/pen/FlxyI

EDIT: Just realised that this demos left/right and not right/left.

RE-EDIT: Yeah…as Croco said, A mock-up image would be useful

[CrocoDillon]

Can you provide sample markup in CodePen? And maybe a mockup drawing to illustrate what you’re after?

[Paulie_D]

Hmmm…: http://codepen.io/Paulie-D/pen/FxpIz

[webdesignessex]

Thanks Paulie_D – I’ll take a look.

CrocoDillon : http://cdpn.io/BhKGq

So those green lozenges I want to be right aligned but still to the left of the text which should remain left aligned.

So effectively it’s all aligned where the right-hand side of the lozenge is and the text starts.

Can’t work out how to upload a simple illustration to codepen as quite a simple concept I think but hard to explain. (not used it before but really smart!)

[CrocoDillon]

This would be the easiest way, but needs the width to be hardcoded (text will wrap if it doesn’t fit)

.list span {
display: inline-block;
width: 10em;
text-align: right;
}

> Hmmm…: http://codepen.io/Paulie-D/pen/FxpIz

Why did you add:?

.child:first-of-type {
margin-left:50%;
}

[Paulie_D]

I’m thinking this is more like it :http://codepen.io/Paulie-D/pen/sdjoy

Hacked it together so I’m sure it can be simplified.

[webdesignessex]

Brilliant solution CrocoDillon – that works for me and does the job. I can text-align: center to make the text look nice in the green lozenges and then they can all be the same width.

Cheers!

[CrocoDillon]

Or you can make the green boxes adapt to the width of the content by placing those styles on `.list span a` like Paulie did. Either way, glad that works :)

[webdesignessex]

Good point! thanks!

This all works really well so thanks Guys!

[Author]

Posts