固定幅のコンテンツ、無制限の背景幅を持つ2列のレイアウト

Question

私はウェブサイト用のレイアウトを実装しようとしています。実際には、各列に独自の背景色がある単純な2列レイアウトです。ただし、コンテンツの幅は固定されており、中央に配置する必要があります。ブレークポイントはバックグラウンドで、コンテンツの幅に制限されるべきではありません。

私はすでに私が垂直方向にタイルでし中心に背景画像を使用するためのアイデアを持っていたが、このソリューションは、ウェブサイトの最大の幅になるだろう：私も絵を作っている状況を説明するために

画像の幅に依存する。

もっと良い解決策はありますか？事前
で

おかげでデビッド

Answer 1

あなたはBGのように画像が960ピクセル幅の最小値をまたがる必要があり、画像を使用したい場合は、1色、右320PXである第1の640ピクセル幅が他の色にする必要があります。

bgがサイト全体に広がるようにするには、上記の列のサイズで最初の1024ピクセルに及ぶ大きさの背景を作成する必要があります。あなたのCSSにこれを追加します。

.wrapper { 
    background:url("my image here") 0 0 repeat-y; 
} 

あなただけの色を使用したい場合は、単にCSSで各colクラスの次の属性を設定します。

：次のHTML構造を仮定し

col1 { background-color:#fff; } 
col2 { background-color:#ccc; } 

// This will create a wrapper across the entire page. 
.wrapper { 
    margin:0 auto; 
    width:100%; 
} 

// This is your centered column 
.content { 
    float:left; 
    width:960px; 
} 

// This is your first column 
.col1 { 
    background: **your background goes here 
    float:left; 
    width:640px; 
} 

// This is your second column 
.col2 { 
    background: **your background goes here 
    float:left; 
    width:320px; 
} 

：

<div class="wrapper"> 
    <div class="content"> 
     <div class="col1"> 
     </div> 
     <div class="col2"> 
     </div> 
    </div> 
</div> 

には、以下のCSSを試してみてください

bgがサイト全体に広がるようにするには、先ほど述べた上記の列のサイズで最初の1024pxに及ぶ大きさの背景を作成する必要があります。

Answer 2

YUIは、それが助けかどうかを確認し、それを確認してくださいグリッドレイアウトのために非常に良い解決策を提供しています。 http://developer.yahoo.com/yui/grids/