title: Pure HTML: How to create this layout without using "float"?
body: <p>I'm trying to create the following layout for my website:</p>
  
  <pre><code>&lt;table width="80%" align="center"&gt;
      &lt;tr&gt;
          &lt;td width="80%" bgcolor="red"&gt;MAIN CONTENT&lt;/td&gt;
          &lt;td bgcolor="green"&gt;SIDEBAR&lt;/td&gt;
      &lt;/tr&gt;       
  &lt;/table&gt;
  </code></pre>
  
  <p>As you would imagine this will create a table that is 80% of the page width and the content area is 80% of that width, while the sidebar fills the rest. </p>
  
  <p>But this time I want to use DIVs or SPANs or basically a TABLEless design. Now, I know I can use two DIVs and use their "float" properties to achieve this but I was hoping to see if there is something more simple and more logical like this:</p>
  
  <pre><code>&lt;div align="center" style="width:80%"&gt;
      &lt;span style="width:80%;"&gt;
          MAIN CONTENT
      &lt;/span&gt;
      &lt;span&gt;
          SIDEBAR
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately the above does not work at all and I don't know why. Can someone please show me the purest HTML implementation for it which does not use "float"? </p>
  
  <p>Every site I see on the internet nowadays has at least one sidebar so I'm hoping your answer to this will help a lot of people besides me. Thanks!</p>