私の含むdivの背景色がページを横切っていないのはなぜですか？

Question

次の点を考慮してください：http://jsfiddle.net/MgZ7n/10/

私はhd全体を青で強調したいと思います。それは、左のコンテンツから正しいコンテンツまでです。どのようにhd要素の幅を100％に設定せずに達成するのですか？

注：幅を100％に設定するとChromeに奇妙なバグが発生します。ブラウザがフルスクリーンで設定されていると、右の要素の内容が右に出血し、一部が画面外になります。

ありがとうございます！

Answer 1

（あなたが本当に固定位置となし幅100％を必要とする場合）、これについては何：

#hd { 
    background-color:blue; 
    position:fixed; 
    right: 0; 
    left: 0; 
} 

http://jsfiddle.net/MgZ7n/17/

Answer 2

私はこの単純な変更製：#HDに

#hd 
{ 
    background-color:blue; 
    position:fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 
#right 
{ 
    float:right; 
    margin-right: 10px; 
} 

をクロームで、私はブリードオフ表示されません。ここに私ですjsFiddle

私はあなたのspan id="right"を変更しました。あなたはそれを浮かせて、固定された位置に設定しました。お互いのオーバーライドの種類（私は順位を獲得すると仮定します）。あなたのための解決策は、それを浮かせることです：右と余白 - 右：10px。

Answer 3

ノート*あなたのCSSに

#hd 
{ 
    background-color:blue; 
    /*position:fixed;*/ 
} 

をHDスタイルから固定位置を削除します。あなたのフィドルのタイプミスがCSSセクション#leftに、あります、#centerスタイルはFLOADの代わりに、フロート

を語ります

Answer 4

位置を削除：CSSの#hdから修正しました。青は完全に伸びます。

Answer 5

私は（上の固定位置を削除し、あなたの問題を解決するには、以下のCSSを変更#hdを削除して誤植を削除しました）：

#hd 
{ 
    background-color:blue; 
} 
#left, #center 
{ 
    float:left; 
} 
#right 
{ 
    float:right; 
    position:fixed; 
    right:10px; 
    top:0px; 
} 

あなたの目的はこのレイアウトではわかりませんが、改善が必要だと思います。

3つのコンテンツの列にspanの代わりにdivを使用することをおすすめします。

div要素を使用する場合、必要に応じてdiv要素をスタイル設定し、そのdiv要素内にコンテンツを配置することができます。あなたのCSSを使用すると、あなたのコンテンツdivsをうまく隣同士で浮かべることができます。display: inline-block