How to position an element to the right side?

Question

I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:

 position: Absolute; top: 20px; right 0px; 

That would work but if you adjust the browser the text moves with it.

I created a JFiddle that you can find here:

http://jsfiddle.net/rKWXQ/

This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.

Here is the header element and inside of that I have a right_header element.

    <div id="header">
        <span class="right_header">Call Now (555) 555-5555</span>
    </div>

Here is my Header CSS:

   /* Header */
   #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
  .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

Can someone please tell me the proper way to accomplish this please?

Note the left side will have a logo there that will not load in JFiddle!

Thanks!

Answer 1

You can easily just float it to the right, no need for relative or absolute positioning.

.right_header {
    color: #fff;
    float: right;
}

Updated jsFiddle - might need to add some padding/margins - like this.

Answer 2

As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.

You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header