title: Positioning an images outside of the layout
body: <p>I am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.</p>
  
  <p>because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left</p>
  
  <p>see here:</p>
  
  <p><img src="https://i.stack.imgur.com/uUU8n.png" alt="enter image description here"></p>
  
  <p><a href="http://www.wireframebox.com/test/sideimages/index_leftworks.html" rel="nofollow noreferrer">http://www.wireframebox.com/test/sideimages/index_leftworks.html</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  body { margin: 0; padding: 0; border: 0; background-color:#096 }
  
  img { border: 0; }
  
  #main { 
      width:960px; 
      height:216px; 
      background-image:url(main.jpg);
      position:relative;
      top:0; margin: 0 auto;
  }
  
  
  
  #left {
      width:170px;
      height:216px;
      background-image:url(left.jpg);
      float:left;
      left:-170px;
      position:relative;
  }
  
  #right {
      width:170px;
      height:216px;
      background-image:url(right.jpg);
      float:right;
      left:170px;
      position:relative;
  }
  
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="main"&gt;
          &lt;div id="left"&gt;&lt;/div&gt;
          &lt;div id="right"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work</p>
  
  <p>see here</p>
  
  <p><img src="https://i.stack.imgur.com/DxleH.png" alt="enter image description here"></p>
  
  <p><a href="http://www.wireframebox.com/test/sideimages/" rel="nofollow noreferrer">http://www.wireframebox.com/test/sideimages/</a></p>
  
  <p>Code is equal, only <code>&lt;div id="right"&gt;&lt;/div&gt;</code> is missing</p>
  
  <p>the css is in the source.</p>
  
  <p>you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width</p>
  
  <p><a href="http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/" rel="nofollow noreferrer">http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/</a></p>
  
  <p>why does this work on the left but not the right?</p>