CSSの右側に要素を配置する

Question

CSSの要素をヘッダーの右側に配置しようとしていますが、その方法を正確にはわかりません。

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

動作しますが、あなたはブラウザを調整した場合、テキストはそれで動くだろう：私が使用してみました。

私はあなたがここで見つけることができJFiddleを作成しました：

http://jsfiddle.net/rKWXQ/

あなたは私が何をしようとしていますかを見ることができるこの方法を。 Call Now（555）555-5555というラップされたdiv要素の中にテキストがあります。

ここにヘッダー要素があり、その中にright_header要素があります。ここで

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

は私のヘッダーの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} 

誰かが私にこれをしてください達成するために適切な方法を教えてくださいことはできますか？

左サイドには、JFiddleにロードされないロゴが表示されます。

ありがとうございます！

Answer 1

右手にfloatを簡単に設定できます。relativeまたはabsoluteの位置合わせは不要です。

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

Updated jsFiddleは - like this - いくつかのpadding/marginsを追加する必要があります。

Answer 2

JoshC記載のとおり、floatを使用することも1つの選択肢です。あなたの状況は別の解決策を示唆していると思います。

あなたを有効にするには、あなたの#right_headerにposition: absoluteためにあなたの#header要素にposition: relativeを設定する必要があります。一度それを設定すると、あなたは自由に配置することができます。#header

Answer 3

JoshCの浮動小数点数を使った答えはうまくいきますが、これはうまくいきません。

コードが機能しない理由は、絶対位置が0x0の寸法を基準にしているからです。

このコードが機能するには、 ''は絶対的な位置にする必要があります。

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;} 

それはへの変更...

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

Answer 4

あなたが位置してやりたい場合は、それをしなかった。このください

#header {margin: auto; position:relative; 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: 0px; right: 0px}