CODEWITHSUNDEEP
htmlcss
Newtt
Newtt

Reputation: 6200

Stick text element to right of div

I've got a menu of items that need to be displayed with their prices in the following manner:

ITEM...................120

(The dots are just to show the spacing between the two and will not appear in the code)

What I've done till now is create a div of width:200px in which I've put the text.

Like this: http://jsfiddle.net/Newtt/jE2YL/1/

However, I'd like to know if it's possible to stick the price to the right margin of the box? I've tried padding-left: X px;, but I've got a list of 100+ menu items each of which have arbitrary length of characters which in turn changes the padding for each price element and changing the padding of each element is rather cumbersome.

Thanks!

Upvotes: 0

Views: 6162

Answers (1)

BenM
BenM

Reputation: 53238

You can combine position: absolute and position: relative.

Use the following CSS:

.abc{
    width:200px;
    background:#ccc;
}
    .abc h5 {
        position: relative;
    }
        .abc h5 span {
            position: absolute;
            right: 0;
        }

jsFiddle Demo

Alternatively, you can just use float: right on the <span>:

.abc h5 span {
    float: right
}

jsFiddle Demo 2

Upvotes: 1

Related Questions