CODEWITHSUNDEEP
htmlcss
Only Bolivian Here
Only Bolivian Here

Reputation: 36733

Position spans within a p tag so one part stays on the left, the other on the right

Here's what I've tried so far:

#billingsummary span.billingitem {
    color: White;
    text-align: left;
}

#billingsummary span.billingvalue {
    text-align: right;
}

<p>
    <span class="billingitem">@Model.ProductName</span>
    <span class="billingvalue">$ <span id="billingproductcost">4.00</span></span>
</p>

So I'd like billingitem to be as far to the left as possible.

And I'd like billingvalue to be as far to the right as possible.

The outcome isn't what I want:

enter image description here

Upvotes: 0

Views: 81

Answers (3)

Waiting for Dev...
Waiting for Dev...

Reputation: 13029

what text-align does is align text inside a block element to the side specified:

http://www.w3.org/TR/CSS2/text.html#alignment-prop

Span are inline elements, so text-align has no effect for them. You should float them:

#billingsummary span.billingitem { 
    color: white; 
    float: left; 
} 
#billingsummary span.billingvalue { 
    float: right; 
}

Floating them you make them block elements and tell them to be in the extrem and out of the normal flow. If you have some problem with following elements you should clear: both them

Upvotes: 0

NGLN
NGLN

Reputation: 43649

Use float:

#billingsummary span.billingitem { 
    color: white; 
    float: left; 
} 
#billingsummary span.billingvalue { 
    float: right; 
} 
#billingsummary p {
    clear: both;
}

Upvotes: 2

Roman Goyenko
Roman Goyenko

Reputation: 7070

do float:right; and float:left; instead. The elements after that should include clear:both; if you want them to be below both of those items.

Upvotes: 1

Related Questions