The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Right align then left align on one line

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #44499

    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?


    Can you explain further what you mean?

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


    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.


    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.


    Alternating DIVs ideally.

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


    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


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


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


    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 {


    I’m thinking this is more like it :

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


    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.



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


    Good point! thanks!

    This all works really well so thanks Guys!

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.