title: Getting div to expand correctly
body: <p>I've spent the last couple hours researching every layout method I can think of to get this to work. The code I'm working with is below:</p>
  
  <pre><code>&lt;!-- Begin Wrap --&gt;
  &lt;div id="wrap"&gt;
  
      &lt;!-- Begin contentWrap --&gt;
      &lt;div id="contentWrap"&gt;
  
      &lt;!-- Begin statementDiv --&gt;
      &lt;div id="statementDiv" class="transparent blackText"&gt;
  
          &lt;p&gt;
          ART&lt;br&gt;
          CULTURE&lt;br&gt;
          F&lt;span class="miniMargin"&gt;A&lt;/span&gt;SHION&lt;br&gt;
          THEBLACK&lt;br&gt;
          COLLARWORKER&lt;br&gt;
          &lt;/p&gt;
  
      &lt;/div&gt;
      &lt;!-- End statementDiv --&gt;
  
  &lt;!-- Begin miniWrap --&gt;
  &lt;div id="miniWrap"&gt;
  
      &lt;!-- Begin socialDiv --&gt;
      &lt;div id="socialDiv" class="transparent marginRight"&gt;
      &lt;/div&gt;
      &lt;!-- End socialDiv --&gt;
  
      &lt;!-- Begin navButtons --&gt;
      &lt;div id="navButtons" class="floatLeft"&gt;
              &lt;img src="images/buttons/gallery.png" class="marginRight"&gt;
              &lt;img src="images/buttons/blog.png"&gt;
  
          &lt;/div&gt;
          &lt;!-- End navButtons --&gt;
  
      &lt;/div&gt;
      &lt;!-- End miniWrap --&gt;
  
      &lt;!-- Begin fillDiv --&gt;
      &lt;div class="fillDiv transparent blackBG"&gt;&lt;/div&gt;
      &lt;!-- End fillDiv --&gt;
  
      &lt;/div&gt;
      &lt;!-- End contentWrap --&gt;
  
      &lt;!-- Begin Footer --&gt;
      &lt;div id="footer"&gt;
  
      &lt;/div&gt;
      &lt;!-- End Footer --&gt;
  
  &lt;/div&gt;
  &lt;!-- End Wrap --&gt;
  </code></pre>
  
  <p>and the CSS is:</p>
  
  <pre><code>#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;}
  </code></pre>
  
  <p>I've gone back and forth changing the layout so much I've inadvertently broken the design more. Any tips or suggestions would be greatly appreciated. </p>
  
  <p>What I am hoping to accomplish is to have statementDiv, miniWrap, and fillDiv to on the same horizontal line. The two left divs have a static size. I would like the third div (fillDiv) to auto expand to fill the remaining % needed. </p>
  
  <p>Auto makes the div go to 0 wide, and 100% causes the line to drop under the other divs. </p>