title: Text gets on top of image while resizing browser
body: <p>I am working on a webpage using HTML and CSS. When I have my browser in full screen, everything looks good. However, if I resize my browser, the text shows up on top of the image. I have tried to google about this, but did not get any resolution. Has anyone experienced similar situation, and knows of a solution? Please share your thoughts. </p>
  
  <p>The code is in the link:
  <a href="http://jsfiddle.net/eJyZs/" rel="nofollow">http://jsfiddle.net/eJyZs/</a></p>
  
  <p>Btw, I am using SimpleGrid as well. <a href="http://simplegrid.info/" rel="nofollow">http://simplegrid.info/</a></p>