title: CSS - float, fix and dynamic width
body: <p>I'm not so versed in CSS and want to create a site with 3 columns where left and right side width are fixed while the center width is dynamic. Also the site should be at least compatible with IE (ver. 6 +), Firefox, Chrome and Safari. Any help?</p>
  
  <p>My current code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  &lt;!--
  #Content { width: 100%; height: 300px; }
  div.left { float: left; width: 150px; }
  div.middle { float: left; }
  div.right { width: 150px; }
  --&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="Content"&gt;
      &lt;div class="left"&gt;Left&lt;/div&gt;
      &lt;div class="middle"&gt;Middle&lt;/div&gt;
      &lt;div class="right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Additional requirement: I want that the middle and right divs stay on the same line even when the browser size is so small.</p>
  
  <p>EDIT:
  I've found a site that has a similar structure:
  <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" rel="nofollow">http://matthewjamestaylor.com/blog/perfect-3-column.htm</a></p>
  
  <p>However i want to have the left and right side fixed (150px). Can anyone help?</p>