Align text to right

Question

How do I align the text to right. I have a container with expand and collapsing. I want to align the expand/collapse text to right. I don't want to use float:right;. Is there any other way we can achieve the same.

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

http://jsfiddle.net/eK8X5/2354/

Answer 1

Have you tried adding this to your CSS?

text-align: right

Answer 2

Use this:

.header{
    text-align:right;
}

This will work for you sure.

Answer 3

You can try this:

Demo

.container .header {
  background-color:#d3d3d3;
  padding: 2px;
  cursor: pointer;
  font-weight: bold;
  text-align:right;
}

Answer 4

Add text-align to your header class

CSS :

.container .header {
  background-color:#d3d3d3;
  padding: 2px;
  cursor: pointer;
  font-weight: bold;
  text-align:right;
}