title: how to make divs adjust to dynamic screen resolutions?
body: <p>I need to have 3 divs, out of which 1 is set to width of 1000px and be in the middle of the page, and the other 2 should fill the screen width from the left and right of the main div. I want this to work on all screen resolutions but I can't find the way to do it.</p>
  
  <p>My code so far (I used colors as a visual aid)- </p>
  
  <p>css:</p>
  
  <pre><code>#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
  #rightside { background: blue; float: left; width: 100%; position: relative; }
  #container { background: yellow; float: left; width: 1000px; position: relative; }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div id="leftside"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div id="container"&gt;the content&lt;/div&gt;
  &lt;div id="rightside"&gt;&amp;nbsp;&lt;/div&gt;
  ...
  </code></pre>
  
  <p>So far it is not working. how do I make the "leftside" and "rightside" divs automatically adjust to what is left in the screen resolution - for any screen resolution?</p>
  
  <p>Thanks for the help.</p>