title: CSS Layout Fixed-Width
body: <p>I am aiming for a fixed width layout, with <code>width:1008px</code> across all monitors. Here's my HTML-</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="god_container"&gt;
      &lt;div id="root"&gt;
          ... all content ...
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and CSS - </p>
  
  <pre><code>#god_container{                                                                                                       
      background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;                           
      margin:auto;                                                                                                      
      position:static;                                                                                                  
      width:auto;                                                                                                       
  }                                                                                                                     
  
  #root {                                                                                                               
      background-color:#FFFFFF;                                                                                         
      margin:auto;                                                                                                      
      width:1008px;                                                                                                     
      color:#000000;                                                                                                    
      font-family:Verdana,Arial,sans-serif;                                                                             
      font-size:10pt;                                                                                                   
  }
  body{
      color:#373737;
      font:16px arial;
      line-height:1;
      background-color:#D4D9DD;
  }
  </code></pre>
  
  <p>I thought this would solve it. But when I render, the <code>root</code> css does not adhere to <code>1008px</code> value. Also root's <code>background-color</code> does not show as <code>#FFFFFF</code> i.e. White. It still shows my <code>body</code>'s  <code>background-color</code>. What am I doing wrong?</p>
  
  <p><strong>UPDATE: To anyone interested I have found excellent ready-made CSS layouts at <a href="http://www.dynamicdrive.com/style/layouts/category/C12/" rel="nofollow">http://www.dynamicdrive.com/style/layouts/category/C12/</a></strong></p>