title: How do I get a FIXED div to hold it's space?
body: <p>I am trying to create a layout with fixed menus on both the upper-right and upper-left-hand corners (both have a width of 50px), and a 900px wide content area in the middle (not difficult). However, when the user re-sizes their browser window, I want all DIV elements to hold their width - in other words I don't want any DIVs to go under or over any other DIVs. I want the browser window to force a horizontal scroll bar when it gets smaller than 1000px (the combined width of the elements on the page).</p>
  
  <p>Here is what I've got so far, obviously it isn't correct: <a href="http://linomeoli.com/test" rel="nofollow">http://linomeoli.com/test</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  div#sideleft {
      position:fixed;
      width:50px;
      height:90px;
      top:20px;
      left:20px;
  }
  
  div#sideright {
      position:fixed;
      width:50px;
      height:90px;
      top:20px;
      right:20px;
  }
  
  div#middle {
      width:900px;
      margin:auto;
  }
  
  &lt;/style&gt;
  
  &lt;body&gt;
  
  &lt;div id="sideleft"&gt;
  This shit&lt;br /&gt;
  that shit&lt;br /&gt;
  &lt;/div&gt;
  
  &lt;div id="middle"&gt;
  &lt;img src="http://dispose.co/images/dulla_01.jpg" /&gt;
  &lt;img src="http://dispose.co/images/dulla_02.jpg" /&gt;
  &lt;img src="http://dispose.co/images/dulla_03.jpg" /&gt;
  &lt;img src="http://dispose.co/images/dulla_04.jpg" /&gt;
  &lt;img src="http://dispose.co/images/dulla_05.jpg" /&gt;
  &lt;img src="http://dispose.co/images/dulla_06.jpg" /&gt;
  &lt;/div&gt;
  
  &lt;div id="sideright"&gt;
  previous&lt;br /&gt;
  next&lt;br /&gt;
  and whatever
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I know this has got to be a pretty simple task; however, I'm stuck! I promise, I've spent a good amount of time attempting to solve this before soliciting help. Any help would be greatly appreciated.</p>
  
  <p>Thanks</p>