title: 2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
body: <p>Consider the following 2 cols html structure:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="left"&gt;some text&lt;/div&gt;
      &lt;div class="right"&gt;some text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container { overflow: hidden; }
  .left { float: left; width: 200px; background: red; }
  .right { overflow: hidden; background: green; }
  </code></pre>
  
  <p>The same code in jsFiddle - <a href="http://jsfiddle.net/vny2H/" rel="nofollow">http://jsfiddle.net/vny2H/</a></p>
  
  <p>So we have 2 columns. The left column width is fixed, the width of the right one is liquid.
  If we remove the left column from html, the right column stretches to 100% of parent #container width.</p>
  
  <p>The question is: can we change the order of the left and right columns?
  (I need it for SEO)</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>
  
  <hr>
  
  <h2>Added</h2>
  
  <p>There's one interesting method to reach what I want, but fixed column becomes not removable. The method is based on negative margin. <a href="http://jsfiddle.net/YsZNG/" rel="nofollow">http://jsfiddle.net/YsZNG/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div id="mainCol"&gt;
          &lt;div class="inner"&gt;
              &lt;p&gt;Some text&lt;/p&gt;
              &lt;p&gt;Some text&lt;/p&gt;
              &lt;p&gt;Some text&lt;/p&gt;
              &lt;p&gt;Some text&lt;/p&gt;
          &lt;/div&gt;&lt;!-- .inner end --&gt;
      &lt;/div&gt;&lt;!-- .mainCol end --&gt;
  
      &lt;div id="sideCol"&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
      &lt;/div&gt;&lt;!-- .sideCol end --&gt;
  
  &lt;/div&gt;&lt;!-- #container end --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container { overflow: hidden; width: 100%; }
  
  #mainCol { float: right; width: 100%; margin: 0 0 0 -200px; }
  #mainCol .inner { margin: 0 0 0 200px; background: #F63; }
  
  #sideCol { float: left; width: 200px; background: #FCF; }
  </code></pre>
  
  <p>So we have 2 ways:</p>
  
  <ol>
  <li>Using "float" for the fixed column and "overflow: hidden" for the liquid. Fixed column becomes removable. But liquid one goes second in code.</li>
  <li>Using negative margin. Liquid column goes first in code. But fixed one is not removable.</li>
  </ol>
  
  <p>Is there a third way, when fixed column is removable and liquid one is the first in code?</p>
  
  <hr>
  
  <h2>Added</h2>
  
  <p>Half-decision has been suggested by @lnrbob. The main idea - using table-like divs. <a href="http://jsfiddle.net/UmbBF/1/" rel="nofollow">http://jsfiddle.net/UmbBF/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="right"&gt;some text&lt;/div&gt;
      &lt;div class="left"&gt;some text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>СSS</p>
  
  <pre><code>#container { display: table; width: 100%; }
  .right { display: table-cell; background: green; }
  .left { display: table-cell;  width: 200px; background: red; }
  </code></pre>
  
  <p>This method is suitable, when a fixed column is placed to the right in a site. But if we need it to the left - it seems to be impossible to do this.</p>