title: Container div moves to the left once content is added
body: <p>Hi I have a 4 page website that separates into these pages:</p>
  
  <ul>
  <li>Index</li>
  <li>About</li>
  <li>My Work</li>
  <li>Contact</li>
  </ul>
  
  <p>On the Index page i have <code>nivoslider</code> with height of 350px.</p>
  
  <p>On the about 7 contact page i have a div also with a height of 350px.</p>
  
  <p>On the my work page i have a div that has no height so that it expands vertically with content.</p>
  
  <p>For some reason if I add content that increases the my work page div past 350px it causes the main container div to move to the left slightly. The container is the same on every page and its only the content that causes it. I have tried text,images, other divs they all cause the same problem.</p>
  
  <p>The HTML:</p>
  
  <pre><code>body {
  background-color: #efe0b5;
  background-image: url(images/stripe.png);
  background-repeat: repeat-x;
  background-position: left top;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="header"&gt; 
  &lt;div id="logo"&gt;
  &lt;img src="images/logo.png" width="145" height="40" alt="Joanne Stansfield Logo" /&gt;
  &lt;/div&gt;
  &lt;div id="nav"&gt;
  &lt;ul class="nav-bar"&gt;
  &lt;li class="home"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="about"&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
  &lt;li class="mywork"&gt;&lt;a href="mywork.html"&gt;My Work&lt;/a&gt;&lt;/li&gt;
  &lt;li class="getintouch"&gt;&lt;a href="getintouch.html"&gt;Get in Touch&lt;/a&gt;&lt;/li&gt;     
  &lt;/ul&gt;
  &lt;/div&gt;         
  &lt;/div&gt;
  &lt;div id="main4"&gt;
  &lt;img src="images/mywork-header.png" width="920" height="70" alt="About Me" /&gt;    
  &lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>* {
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  }
  
  @font-face {
  font-family: 'CoopLightRegular';
  src: url(/cooplight-webfont.eot) format('embedded-opentype'),
       url(/cooplight-webfont.eot?#iefix) format('embedded-opentype'),
       url(/cooplight-webfont.woff) format('woff'),
       url(/cooplight-webfont.ttf) format('truetype'),
       url(/cooplight-webfont.svg#CoopLightRegular) format('svg');
  font-weight: normal;
  font-style: normal;
  }
  #wrapper {
  width: 960px;
  padding: 0px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  }
  #wrapper #header {
  height: 200px;
  width: 100%;
  margin-top: 25px;
  float: left;
  }
  #wrapper #header #logo {
  float: left;
  height: 200px;
  width: 560px;
  }
  #wrapper #header #logo img {
  height: 40px;
  width: 145px;
  margin-top: 60px;
  }
  
  #wrapper #header #nav {
  position:relative;
  width: 400px;
  height: 200px;
  float:right;
  overflow: hidden;
  }
  #wrapper #header .nav-bar li {
  position: absolute;
  list-style: none;
  }
  #wrapper #header .nav-bar li a { 
  display: block;
  width: 200px;
  height: 200px;
  text-indent: -9999px;
  }
  #wrapper #nav .nav-bar li.home { left: 70px; top: -30px; }
  #wrapper #nav .nav-bar li.home a { background:url(../images/home.png) no-repeat; }
  #wrapper #nav .nav-bar li.home a:hover { background:url(../images/home.png) no-repeat 0      -200px; }
  
  #wrapper #nav .nav-bar li.about { left: 130px; top: -30px;}
  #wrapper #nav .nav-bar li.about a { background:url(../images/aboutme.png) no-repeat; }
  #wrapper #nav .nav-bar li.about a:hover { background:url(../images/aboutme.png) no-repeat 0 -200px; }
  
  #wrapper #nav .nav-bar li.mywork { left: 190px; top: -30px; }
  #wrapper #nav .nav-bar li.mywork a { background:url(../images/mywork.png) no-repeat; }
  #wrapper #nav .nav-bar li.mywork a:hover { background:url(../images/mywork.png) no-repeat 0 -200px; }
  
  #wrapper #nav .nav-bar li.getintouch { left: 250px; top: -30px; }
  #wrapper #nav .nav-bar li.getintouch a { background:url(../images/getintouch.png) no-repeat; }
  #wrapper #nav .nav-bar li.getintouch a:hover { background:url(../images/getintouch.png) no-repeat 0 -200px; }
  
  #wrapper #main {
  background-color: #FFF;
  width: 100%;
  height: 350px;
  float: left;
  }
  #wrapper #main3 {
  background-color
  : #FFF;
  width: 100%;
  height: 350px;
  float: left;
  }
  #container #wrapper #main3 #left {
  background-color: #999;
  float: left;
  height: 200px;
  width: 440px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 30px;
  }
  #container #wrapper #main3 #right {
  background-color: #666;
  float: right;
  height: 200px;
  width: 440px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 30px;
  }
  #container #wrapper #main3 #form {
  background-color: #CCC;
  height: 200px;
  width: 920px;
  margin-top: 30px;
  }
  #wrapper #main4 {
  background-color: #FFF;
  width: 100%;
  min-height: 350px;
  float:left;
  }
  #container #wrapper #main4 .gallery {
  background-color: #03C;
  height: 200px;
  width: 960px;
  margin-top: 30px;
  margin-bottom: 30px;
  float: left;
  }
  #wrapper .title {
  height: 70px;
  width: 100%;
  float: left;
  }
  .nivoSlider {
  position:relative;
  width:960px; /* Change this to your images width */
  height:350px; /* Change this to your images height */
  background:url(images/loading.gif) no-repeat 50% 50%;
  }
  .nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
  }
  .nivoSlider a {
  border:0;
  display:block;
  }
  #wrapper #footer {
  height: 70px;
  width: 960px;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 20px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  float: left;
  }
  #wrapper #footer img {
  height: 20px;
  width: 55px;
  }
  </code></pre>