CODEWITHSUNDEEP
css
iteles
iteles

Reputation: 889

Right-align a <p> within a <div> WITHOUT using floats

I have a single line with 1 icon and 2 pieces of text - I would like to display the right-most piece of text on the far right of the line, with the other items aligned left.

I'm trying to keep the code as lean as possible so I'd like to see if this can be done without using floats, without wrapping each <p> in a <div> of its own and also without JS (which is why I couldn't find an appropriate answer from similar questions asked on here).

Here's the JSFiddle, I'd like to have the word Break displayed on the far right of the line and have the task take up the rest of the width of the containing div:
http://jsfiddle.net/2w1cu71e/

Thank you in advance for any help you might be able to give me, I'm finding it a bit hard to find definitive resources on CSS best practices (aside from CSS Tricks!).
Ines

Upvotes: 1

Views: 77

Answers (3)

German Cabarcas
German Cabarcas

Reputation: 21

can you try this instead of the CSS provided? For some reason it doesn't work on jsfiddle but it works just fine on a local html file.

.desc-single-line {
    display: flex;
    flex-direction: row;
}

.task-category{
    color:red;
    text-align: right;
    flex: 2;
}

.desc-single-line p{
  font-size: 0.8em;
  font-family: 'Open Sans', sans-serif;
}

Upvotes: 0

Stickers
Stickers

Reputation: 78796

I think using <p> tag there doesn't make sense, <span> would be better for doing the job. For the layout I think CSS table table-row table-cell can be a good option over flexbox, and it works on all browsers.

DEMO: http://jsfiddle.net/2w1cu71e/1/

#done {
    display: table;
    width: 100%;
}
.desc-single-line {
    display: table-row;
}
.desc-single-line i,
.desc-single-line span {
    display: table-cell;
}
.desc-single-line i {
    width: 20px;
}
.desc-single-line span {
    font-size: 0.8em;
    font-family: 'Open Sans', sans-serif;
}
.desc-single-line .task-category {
    color: red;
    text-align: right;
}

Upvotes: 0

Rob
Rob

Reputation: 15168

You only need to add position:absolute;right:0; to .task-category but this markup might be made far simpler if you don't have a reason to be using the <p> elements at all.

All-in-all, I don't see the difference to using a float. There's also the question as to why the <p> is an inline-block but you have your reasons.

Upvotes: 2

Related Questions