Placing an Element to the right side with CSS

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!


solution

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.