レイアウト - 親divは980ピクセル、子は100％である必要があります

Question

レイアウト構造に問題があります。ここで

はモックアップである：http://i.imgur.com/JbboQ.jpg

とコード：

<ul id="nav"> 
    <li></li> 
</ul> 
<div id="home"> 
    <div class="slider"> 
     <div class="heading"></div> 
     <div class="slidebox"></div>  
    </div> 
    <div class="col1"></div> 
    <div class="col2"></div> 
    <div class="col3"></div> 
</div> 

私は最も簡単な方法は、単に各div要素ではなく、私は巣のスタイルすることができないであろうよりも幅スタイルを追加することであろうと思いますこれはオプションではありません。

今の#home divは980pxの幅を持っていますが、スライダは100％のバックグラウンドを持ち、親divは980pxです。たぶん遅すぎるかもしれませんが、私はちょうどこれのための適切かつ意味論的な解決策を見つけることができません。

誰かが私をここに助けることができる場合、私は、

おかげで、本当に喜んでいるだろう。

Answer 1

あなたが試すことができます物事のカップルがあります：あなたはページ幅の100％を取得することができるように

1. は、あなたのスライダーのdivを分離。

   <div id="home"> 
       ... 
   </div> 
   <div class="slider"> 
       <div class="heading"></div> 
       <div class="slidebox"></div>  
   </div> 
   <div id="columns"> 
       <div class="col1"></div> 
       <div class="col2"></div> 
       <div class="col3"></div> 
   </div> 
   
   .slider { width: 100% } 
   

2. それとも上にレンダリングするよう、あなたは自宅の指数よりも高い数値にスライダーdiv要素のZ-indexプロパティを設定することができます。

   <div id="home"> 
       <div class="col1"></div> 
       <div class="col2"></div> 
       <div class="col3"></div> 
   </div> 
   <div class="slider"> 
       <div class="heading"></div> 
       <div class="slidebox"></div>  
   </div> 
   
   .home { width: 980px; z-index: 1 } 
   .slider { width: 100%; position: relative; top:-50; z-index: 2 } 
   

注：スライダーのdivの位置を調整する必要があります。