title: CSS fixed layout causes horizontal scrollbar to show up on low resolution screens
body: <p>I have got my website under develp <a href="http://hrcprojectconsulting.com/" rel="nofollow">http://hrcprojectconsulting.com/</a> which looks fine when seen on screens with my resolution and size, otherwise, the horizontal scroller pops up and makes browsing annoying.</p>
  
  <p>So I don't know exactly what I have to do. There are fluid layouts out there but they fill the whole screen and that would be kind of too much everything streched out. However, if I use some fixed css then the problem is that depending on the screen size and resolution, a horizontal scrollbar may appear, which must not happen. </p>
  
  <p>Yes, yes, I have done all the reading and in fact I am following a very nice tutorial </p>
  
  <p><a href="http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3#null" rel="nofollow">http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3#null</a></p>
  
  <p>and I understand what the author does and it seemed very easy, so I went to do it with mine, and at the simplest step, it fails me, (prolly cause i have got another layout)</p>
  
  <p>My HTML now (I have today tried to add a footer, but the footer neither does stay at the bottom, nor is it pushed down by content, but is overflowed but that is another story)</p>
  
  <p>So here is the html:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
     &lt;html&gt;
      &lt;head&gt;
  &lt;link rel="stylesheet" href= "&lt;?php echo base_url() ?&gt;css/main_style.css" /&gt;
  &lt;script type ="text/javascript" src="&lt;?php echo base_url()?&gt;js/1.8.js"&gt;&lt;/script&gt;
          &lt;title&gt;Website&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;div id="header"&gt;&lt;/div&gt;
              &lt;div id="content"&gt;
                  &lt;div id="left_content"&gt;&lt;/div&gt;
                  &lt;div id="middle_content"&gt;&lt;/div&gt;
                  &lt;div id="right_content"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS</p>
  
  <pre><code>#container  {
      width:1040px;
      margin:0 auto;
  }
  #header {
  
      height:50px;
      margin-bottom:20px;
  }
  #left_content {
      float: left;
      width:180px;
  
      min-height: 600px;
      margin-right:20px;
  }
  #middle_content {
      font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
      font-size:8px;
      float: left;
      width:640px;
  
      min-height: 600px;
      margin-right:0px;
  }
  #right_content {
      float: right;
      width:180px;
      margin-right:20px;
      min-height: 600px;
  }
  
  
  #footer {
  
    float: left;
  
    background: green;
  
    margin-top: 20px;
  
    margin-right: 10px;
  
    margin-left: 10px;
  
    clear: both;
  
    width: 1020px;
  
    height:200px;
  
  }   
  </code></pre>
  
  <p>So; what I tried to start doing, following the author, was to start modifying the very outermost wrapper container, changing the 1040px; to a 96%.</p>
  
  <p>As soon as I did that, the blue bar that you see as a header shrunk to some 400 px and drifted to the left, plus the webform where you see all the tabs and boxes, just naufragated down to the botton adrift, completely unliking itself from the rest, so a mess.</p>
  
  <p>How come? Why can't I just start doing what the author was doing with his design? he started with that 96% change.</p>