CODEWITHSUNDEEP
htmlcss
wong2
wong2

Reputation: 35720

Background color when text-align is right

I have this html:

<div>
    <p class="highlight-date">2009-4-5</p>
</dvi>

and here is the css:

div{
    width: 200px;
}

div p{
    text-align: right;
}

.highlight-date{
    background-color: yellow;
}​

I'd like to have the background color to be just under the text, but now it would extend from the left of the div. How could I fix this? thanks

Fiddle: http://jsfiddle.net/f6exa/

​

Upvotes: 0

Views: 1561

Answers (3)

Ram
Ram

Reputation: 41

<div>
    <p>
        <span class="highlight-date">2009-4-5</span></p>
</dvi>

Upvotes: 0

Ram
Ram

Reputation: 41

 <div>
    <span class="highlight-date">2009-4-5</span>
</div>
<style type="text/css">
    div
    {
        width: 200px;
        text-align: right;
    }
    .highlight-date
    {
        background-color: yellow;
    }
    ​</style>

Upvotes: 1

McGarnagle
McGarnagle

Reputation: 102753

Here's how you can fix it: http://jsfiddle.net/f6exa/1/

div {
    width: 200px;
    text-align: right;
}

.highlight-date{
    background-color: yellow;
    display: inline-block;
}​

Changes:

  1. Move the text-align: right from the content (p) to the container (div).
  2. Make the content (p) display: inline-block.

Upvotes: 4

Related Questions