Get a free trial // Grow your CSS skills // Land your dream job

Right align then left align on one line

  • # May 2, 2013 at 5:11 am

    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?

    # May 2, 2013 at 5:19 am

    Can you explain further what you mean?

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

    # May 2, 2013 at 5:21 am

    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.

    # May 2, 2013 at 5:26 am

    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.

    # May 2, 2013 at 5:31 am

    Alternating DIVs ideally.

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

    # May 2, 2013 at 5:44 am

    A couple of ways.

    One using classes, another with pseudo-classes. :

    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

    # May 2, 2013 at 5:44 am

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

    # May 2, 2013 at 5:55 am


    # May 2, 2013 at 5:57 am

    Thanks Paulie_D – I’ll take a look.

    CrocoDillon :

    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!)

    # May 2, 2013 at 6:16 am

    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…:

    Why did you add:?

    .child:first-of-type {

    # May 2, 2013 at 6:28 am

    I’m thinking this is more like it :

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

    # May 2, 2013 at 6:30 am

    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.


    # May 2, 2013 at 6:55 am

    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 :)

    # May 2, 2013 at 11:19 am

    Good point! thanks!

    This all works really well so thanks Guys!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed