title: How to put 2 pictures next to each other without moving when adding more text in div?
body: <p>I just started to design a small Webpage to present some designs.<br>
  It's <strong>a page with 2 columns, with a picture and some text for each.</strong>  </p>
  
  <p>The problem I have right now: when I add more text to one column, the picture of the other column moves.  </p>
  
  <p><strong>Check out my fiddle:</strong> 
   <a href="http://jsfiddle.net/JannikS/tMY57" rel="nofollow">http://jsfiddle.net/JannikS/tMY57</a></p>
  
  <p>My HTML markup: </p>
  
  <pre><code>  &lt;div id="designrow"&gt; 
        &lt;div class="design"&gt; 
              &lt;img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" /&gt;          
              &lt;h3&gt;Title &lt;/h3&gt; 
              &lt;p&gt;Short description of our design..&lt;/p&gt;             
        &lt;/div&gt;     
        &lt;div class="design"&gt; 
              &lt;img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" /&gt;          
              &lt;h3&gt;Title &lt;/h3&gt; 
            &lt;p&gt;Short description of our design..&lt;br /&gt; but with some more text!&lt;/p&gt;             
        &lt;/div&gt;   
  &lt;/div&gt; 
  </code></pre>
  
  <p>and CSS: </p>
  
  <pre><code>.designrow { 
   float: left;   }
  
  .design {   
   width: 300px; 
   margin-left: 20px; 
   margin-right: 20px; 
   margin-bottom: 20px; 
   display: inline-block;
    }  
  
  .design img{ 
   width: 100%; 
   height: 100%;  
  }
  </code></pre>