divを正しく展開する

Question

私はこれを動作させるために考えているすべてのレイアウト方法を調査して、最後の2時間を費やしました。私が働いているコードは以下の通りです：

<!-- Begin Wrap --> 
<div id="wrap"> 

    <!-- Begin contentWrap --> 
    <div id="contentWrap"> 

    <!-- Begin statementDiv --> 
    <div id="statementDiv" class="transparent blackText"> 

     <p> 
     ART<br> 
     CULTURE<br> 
     F<span class="miniMargin">A</span>SHION<br> 
     THEBLACK<br> 
     COLLARWORKER<br> 
     </p> 

    </div> 
    <!-- End statementDiv --> 

<!-- Begin miniWrap --> 
<div id="miniWrap"> 

    <!-- Begin socialDiv --> 
    <div id="socialDiv" class="transparent marginRight"> 
    </div> 
    <!-- End socialDiv --> 

    <!-- Begin navButtons --> 
    <div id="navButtons" class="floatLeft"> 
      <img src="images/buttons/gallery.png" class="marginRight"> 
      <img src="images/buttons/blog.png"> 

     </div> 
     <!-- End navButtons --> 

    </div> 
    <!-- End miniWrap --> 

    <!-- Begin fillDiv --> 
    <div class="fillDiv transparent blackBG"></div> 
    <!-- End fillDiv --> 

    </div> 
    <!-- End contentWrap --> 

    <!-- Begin Footer --> 
    <div id="footer"> 

    </div> 
    <!-- End Footer --> 

</div> 
<!-- End Wrap --> 

とCSSは次のとおりです。

#wrap {height: 100%; width:100%; display: table;} 
#miniWrap {height: 41px; width: 362px; float: left; display: table-cell;} 
#navButtons {position: relative;height: 41px;float: left;} 
#contentWrap {position: absolute; bottom: 0; float: left; display: table-row;} 
#socialDiv {height: 41px;float: left;} 
#statementDiv {width: 365px; font-size: 42px; font-family: Arial Black, Gadget, sans-serif; line-height: .8; letter-spacing: -3px; display: table-cell;} 
.fillDiv {width: 100%;height: 41px;display: table-cell;} 
.miniMargin {margin: 0 -3px;} 
.marginRight {margin-right: 3px;} 
.floatLeft {float: left;} 
.blackText {color: #0d0601;} 
.blackBG {background: #0d0601;} 

私は不注意より多くの設計を破ってきたので、多くのレイアウトを変更する前後に行ってきました。どんなヒントや提案も高く評価されます。

私が達成しようとしているのは、statementDiv、miniWrap、およびfillDivを同じ水平線上に置くことです。 2つの左のdivは静的なサイズです。残りの％を満たすために3番目のdiv（fillDiv）を自動的に展開します。

Autoはdivを0幅にし、100％は他のdivの下にドロップします。私はあなたが探しているものんだと思う

Answer 1

私の命題：http://jsfiddle.net/7XPGa/

Answer 2

jsfiddle：http://jsfiddle.net/gWPXF/

Answer 3

このアプローチはどのようなあなたの写真があり、何を知らなくても、あなたのために働くかどうかは確かに言うことは困難です目的の最終見た目ですが...

.blackBGクラスを追加して黒い背景をラップし、その幅を100％に設定して、#statementDivと#miniWrapを白い背景にします。

したがって、プリンシパルはコンテナに.fillDivで表示したい背景色を与え、コンテナ内にある< div内の色を上書きします。スペースを色で塗りつぶすだけなので、.fillDivを取り除くことができます。