title: How to have a left and right sidebar after main content?
body: <p>I discovered that with massive negative percent margin one can achieve having left and sidebar <em>after</em> the main content in DOM but still have them appear right places:</p>
  
  <p>(DOM order is fixed as following)</p>
  
  <pre><code>&lt;div id="content"&gt;The main content&lt;/div&gt;
  &lt;div id="left"&gt;Leftist&lt;/div&gt;
  &lt;div id="right"&gt;Rightist&lt;/div&gt;
  &lt;div id="footer"&gt;Footer&lt;/div&gt;
  </code></pre>
  
  <p>Only CSS I could come up that gives left and right sidebar is following:</p>
  
  <pre><code>#content { 
      background: green; 
      float: right; width: 60%; margin-right: 20%; margin-left: -80%;
  }
  #right { 
      background: blue;
      width: 20%; float: right;
  }
  #left {
      background: red;
      width: 20%; float: left;
  }
  #footer {
      background: gray;
      clear: both;
  }
  </code></pre>
  
  <p>But I'm not entirely sure is this preferred way to achieve this, but it worked, so is there anything wrong with it? (Above <a href="http://jsfiddle.net/DryJE/6/" rel="nofollow">is viewable in jsfiddle.net</a>)</p>
  
  <p>So is there other way to have have a #left and #right sidebar after main #content with CSS?</p>