title: css container div not aligning to top of page
body: <p>I have a two-column layout.  I have a #mainContainer div that contains all of the following (except the #footer):</p>
  
  <ol>
  <li>Across the top: a header div (#intro)(contains a small gradient image), 
  and a #hero div (contains images) </li>
  <li>To contain the two columns: a #content div</li>
  <li>Within the #content div on the left: a #mainContent div</li>
  <li>Within the #content div on the right: a #sideBar div  </li>
  <li>Across the bottom (outside the #mainContainer div):  a #footer div on the bottom 
  (including a gradient image like the header div)</li>
  </ol>
  
  <p>Simple, right?  But I'm having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div's ). (disregard inline styles in footer).  Could someone help me out?</p>
  
  <p><strong>UPDATED: ADDED HTML</strong></p>
  
  <pre><code>body {
  font-family:Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
  background:#bbb;
  text-align:center;
  }
  
  
  
  #mainContainer {
  width:980px;
  margin: 0 auto;
  background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
  text-align:left;
  /*height: 700px;*/
  
  }
  
  #intro {
  /*top:0;*/
  margin: 0;
  text-align:left;
  
  }
  
  
  #hero {
  width:960px;
  padding-left:10px;
  padding-right:10px
  
  }
  
  
  
  #content {
  width:960px;
  padding-left:10px;
  padding-right:10px;
  }
  
  #mainContent_left {
  
  float:left;
  width:640px;
  margin:0;
  padding-right: 20px;
  background:#ccc;
  }
  
  
  
  #sideBar {
  float:left;
  width:300px;
  margin:0;
  /*padding-right: 20px;*/
  background:#ffd;
  }
  
  
  #footer {
  width:960px;
  clear:both;
  background:#cc9;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;title&gt;Descriptions &lt;/title&gt;
  
  
  &lt;link rel="stylesheet" href="css/mainstyles.css" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="mainContainer"&gt;
  
  &lt;div id="intro"&gt;&lt;h2&gt;introducing&lt;/h2&gt;&lt;/div&gt;
  
  &lt;div id="Hero"&gt;
      &lt;ul&gt;
          &lt;li class="name"&gt;&lt;/li&gt;
          &lt;li class="textJoin"&gt;is a member of &lt;/li&gt;
          &lt;li class="name"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
      &lt;div id="mainContent"&gt;
  
          &lt;h3&gt;First Topic title&lt;/h3&gt;
          &lt;p&gt;floated left image and text&lt;/p&gt;
          &lt;p&gt;Some content&lt;/p&gt;
          &lt;p&gt;Some content&lt;/p&gt;
  
          &lt;h3&gt;Second Topic title&lt;/h3&gt;
          &lt;p&gt;Some content&lt;/p&gt;        
          &lt;p&gt;Image here&lt;/p&gt;
  
          &lt;h3&gt;Third Topic title&lt;/h3&gt;
          &lt;p&gt;(floated left image here) Some text&lt;/p&gt;
  
          &lt;h3&gt;Fourth Topic title&lt;/h3&gt;
          &lt;p&gt;(floated left image here) Some text&lt;/p&gt;&gt;
  
          &lt;h3&gt;Fifth Topic title&lt;/h3&gt;
          &lt;p&gt;(floated left image here) Some text&lt;/p&gt;        
          &lt;p&gt;Image here&lt;/p&gt;
  
          &lt;p&gt;(link to FAQ page)&lt;/p&gt;
  
      &lt;/div&gt;
  
  
      &lt;div id="sideBar"&gt;sidebar content
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
  
  
      &lt;div id="footer_warranty"&gt;footer content
          &lt;div id="wf_logos" style="float:left; padding:0 10px 0 0;"&gt;&lt;p&gt;contact info&lt;/p&gt;
  &lt;/div&gt;
          &lt;div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;"&gt;
  &lt;p&gt;some text&lt;/p&gt;&lt;/div&gt;
          &lt;p style="clear:both;" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;p style="clear:both;" /&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>