title: IE 7 DIV Shifts right
body: <p>In IE 7 my div's shift far too much to the right, whilst they behave correctly in Google Chrome. At first I thought it was the z-index but then worked out in was the position:absolute 
  Has anyone come across a fix, it would be much appreciated!</p>
  
  <p>Screenshots:</p>
  
  <p><img src="https://i.stack.imgur.com/sK3Qb.png" alt="chrome"></p>
  
  <p><a href="http://i56.tinypic.com/2vjsqwz.png" rel="nofollow noreferrer">IE7 http://i56.tinypic.com/2vjsqwz.png</a></p>
  
  <p>Here is CSS:</p>
  
  <pre><code>#rightinfohomecontainer {
  height: 300px;
  width: 400px;
  margin-top:160px;
      float: left;
  z-index: 3;
  overflow: hidden;
  position: relative;
  
  #rightinfoboxhome {
  float: left;
  height: 100px;
  width: 400px;
  z-index: 2;
  overflow: visible;
  position: absolute;
  margin-left: 0px;
  
  #rightinfoboxtext {
  
  float: left;
  height: 245px;
  width: 344px;
  z-index: 1;
  margin-top: 60px;
  padding-left: 50px;
  overflow: hidden;
  padding-right: 6px;
  padding-top: 2px;
  margin-left: 0px;
  position: absolute;
  }
  #rightcolumn {
      float: left;
      height: 600px;
      width: 450px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="rightcolumn"&gt;
  &lt;div id="rightinfohomecontainer"&gt;
  &lt;div id="rightinfoboxhome"&gt;&lt;img src="images/aboutus.png" /&gt; &lt;/div&gt;
  &lt;div id="rightinfoboxtext"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>