title: Move Image down with text CSS
body: <p>I have a div with some text, then an image underneath the text, whenever you add more text it goes behind the image, (basic example I created in <a href="http://jsfiddle.net/KarinaMcG/KApb6/7/" rel="nofollow">jsfiddle</a> I want it to push the image down just far enough so you can see the text.  However I want the two boxes to still be inline, so the images stay consistent, ideally I don't want to just change the height of the div as this text is constantly changing.</p>
  
  <pre><code>&lt;div class="box one"&gt;
      &lt;div&gt;
          &lt;h1&gt;Some text 1&lt;/h1&gt;
          &lt;p&gt;My paragraph of text is not going to be visible behind the car&lt;/p&gt;
      &lt;/div&gt;
      &lt;a href="http://www.google.co.uk"&gt;
          &lt;img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="box two"&gt;
      &lt;div&gt;
          &lt;h1&gt;Some text 2&lt;/h1&gt;
          &lt;p&gt;My paragraph of text is not going to be visible behind the car again!&lt;/p&gt;
      &lt;/div&gt;
      &lt;a href="http://www.google.co.uk"&gt;
          &lt;img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  .box {
      color: #333333;
      font-size: 12px;
      height: 305px;
      padding: 10px 15px 0;
      width:150px;
  }
  
  .box div {
      color: #333333;
      font-size: 12px;
      height: 90px;
      padding: 10px 15px 0;
  }
  
  .two {
      float:right;
      margin-top:-310px;
  }
  </code></pre>