title: 3 column layout with middle column fluid and appear first in HTML code, others fixed width
body: <p>I want to make a classic 3-column layout like this:</p>
  
  <pre><code>|  |      |  |
  |L |  M   |R |
  |  |      |  |
  </code></pre>
  
  <p>and I was asked to use following html structure:
  as you can see, the <code>Main</code> div is the first node of #container</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="M"&gt;Main&lt;/div&gt;
      &lt;div id="L"&gt;Left&lt;/div&gt;
      &lt;div id="R"&gt;Right&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How to do that with and without css3 new features?</p>
  
  <p>UPDATE:
  <code>#L</code> and <code>#R</code> has a fixed width, say, 200px. <code>#container</code> has the same width of window(ignore body margin)  <code>#M</code>'s left border touchs right border of <code>#L</code> and <code>#M</code>'s right border touchs left border of <code>#R</code>.</p>