title: Css fluid layout with two columns
body: <p>I need to do a layout in this way:</p>
  
  <pre><code>----------------------
  |   header           |
  ----------------------
  |  N  |              |
  |  A  |   CONTENT    |
  |  V  |              |
  |-----|              |
  |     | ----BAR----  |
  |EMPTY|              |
  |     |              |
  ----------------------
  </code></pre>
  
  <p>I want the overall width to be 100% of the body,
  the navigation has width 15% but min-width 120px.
  The width of the bar (that is an element in the content div) has to be 100% of the content div.</p>
  
  <p>In the html I have the limitation that the navigation div has to go before the content div.</p>
  
  <p>EDIT:
  My code in the html is</p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="nav"&gt;&lt;/div&gt;
  &lt;div id="content&gt;&lt;p id="bar"&gt;Title of paragraph&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code i have in the css right now is:</p>
  
  <pre><code>#nav {
      float: left;
      width: 15%;
      min-width: 120px;
      }
  #content{
      float: right;
  }
  #bar {
  display: block;
  background-color: #D2DEE4;
  }
  </code></pre>
  
  <p>Could you help me please?</p>