title: Make text stay relative within div
body: <p>I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my <a href="http://jsfiddle.net/DMnhB/1/" rel="nofollow">http://jsfiddle.net/DMnhB/1/</a></p>
  
  <p>The html is as follows:</p>
  
  <pre><code>&lt;div id="postd"&gt;&lt;img       
  src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg"&gt;
  
  &lt;span&gt;
  Text Here
  Text Here
  Text Here    
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#postd{
  width:100%;
  padding-bottom: 5%;
  background-color: blue;
  padding-top:6%;
  border-bottom: 1px dotted #ccc;
  }
  
  #postd img{
  width:40%;
  }
  #postd span{
  float:right;margin-left:1px;
  position: absolute;
  background-color: red;
  }
  </code></pre>