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

    # 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

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

    # May 2, 2013 at 5:57 am

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

    # 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…: http://codepen.io/Paulie-D/pen/FxpIz

    Why did you add:?

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

    # May 2, 2013 at 6:28 am

    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.

    # 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.

    Cheers!

    # 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.

*May or may not contain any actual "CSS" or "Tricks".