title: CSS: Image sticking to the bottom right hand side of the document
body: <p>I have a peculiar problem, which I think that a lot of other people have had before, but I'm not so sure there is a good (pure CSS) solution to it...</p>
  
  <p>I have a document with the following structure:</p>
  
  <ul>
  <li>TOP: 100% wide, 200px high</li>
  <li>MIDDLE: 100% wide, variable height</li>
  <li>BOTTOM: 100% wide, 200px high</li>
  </ul>
  
  <p>BOTTOM is essentially a background image which should stick to the bottom right hand side corner of the browser window <em>at all times</em>. However, I don't want to use <code>absolute</code> positioning relative to the body of the document, because then it will flow under the text which is in MIDDLE.</p>
  
  <p>So basically I want the same effect as the one I would get using absolute positioning, but I don't want text or other elements to sort of flow over it. It should behave just as if it didn't have any particular positioning, with width 100% and height 200px, <em>but always in the bottom right hand side of the document</em>.</p>
  
  <p>I'll be glad to answer any questions about this problem, as I'm sure you won't understand this. ;)</p>