title: Expand width to take remaining width of parent div
body: <p>An example of my code can be found on JSFiddle <a href="http://jsfiddle.net/WdZgV/" rel="nofollow">http://jsfiddle.net/WdZgV/</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body {
      margin: 0;
      padding: 0;
  }
  
  .header_div {
      display: inline-block;
      width: 100%;
      text-align: center;
  }
  
  .header {
      display: inline-block;
      height: 100px;
      width: 100%;
      max-width: 1000px;
      background: #ddd;
  }
  
  .logo {
      float: left;
      width: 200px;
      height: 100px;
      background: #bbb;
  }
  
  .menu {
      float: left;
      width: 800px;
      height: 100px;
      background: #999;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="header_div"&gt;
      &lt;div class="header"&gt;
          &lt;div class="logo"&gt;&lt;/div&gt;
          &lt;div class="menu"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What i want is that when you resize the window width to less than 1000px the <code>.menu</code> div resize to the size of the parent div.</p>
  
  <p>So as an example:</p>
  
  <p>If you have your window width as 900px, the <code>.logo</code> div has 200px and the <code>.menu</code> div has 700px.</p>
  
  <p>Is there anyway i can do this with CSS, or i need to use Javascript?</p>