title: Auto Adjust Div Height
body: <p>I want the div that's on the right side to match the height of the div that's on the left. The div on the right should always be the same height as the div on the left. The div on the left auto adjust its height. Both divs should always have the same height. A picture is worth a thousand words so please take a look at the picture below. </p>
  
  <p><strong>Here's the image that explains my problem.</strong></p>
  
  <p><a href="http://i44.tinypic.com/24pcpwj.jpg" rel="nofollow">http://i44.tinypic.com/24pcpwj.jpg</a></p>
  
  <p><strong>JSFIDDLE</strong></p>
  
  <p><a href="http://jsfiddle.net/zFqNH/" rel="nofollow">http://jsfiddle.net/zFqNH/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div style="width:1053px;"&gt;
   &lt;section id="inside" style="overflow: hidden; width:310px; float:right; border-left:0;"&gt; 
   &lt;ul&gt;
   &lt;p class="title"&gt;Funny&lt;/p&gt;
  
  &lt;li class="list"&gt;
      &lt;img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg"      width="100" height="67" style="float:left;padding-right:15px;" /&gt;&lt;/a&gt;
      &lt;h3 style="font-size:20px;"&gt;Grumpy Cat&lt;/h3&gt;        
  &lt;/li&gt;
   &lt;/ul&gt;
   &lt;/section&gt;
  
   &lt;section id="inside"&gt;   
   &lt;h2 class="subheading"&gt;Grumpy Cat&lt;br/&gt;&lt;p style="font-size:14px; margin-top:0px; font-weight:normal;"&gt;&lt;/p&gt;&lt;/h2&gt;&lt;h2 style="border-bottom: 1px solid #dddddd; padding-top:10px;"&gt;&lt;/h2&gt;                                    
   &lt;p class="section"&gt;&lt;/p&gt;                              
  
   &lt;img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700"&gt;
   &lt;br/&gt;                                      
       &lt;img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700"&gt;
   &lt;br/&gt;
           &lt;img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700"&gt;
   &lt;br/&gt;
  
   &lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  #inside { 
  width:700px; 
  border-right: 1px solid #dddddd; 
  border-left: 1px solid #dddddd; 
  min-height: 600px; 
  overflow: hidden; 
  padding-bottom:15px;    
    }
    .title{
  width:300px;
  padding-top:3px;
  padding-bottom:7px;
  color:#fff;
  height:20px;    
  margin-top:125px; 
  background:#2c2c2c;         
  font-size: 18px;
    }
    .section{
  padding-left:30px; 
  padding-bottom:15px; 
  margin-bottom: 1px; 
  font-size: 28px;
  color: #657B83;
    }
    .subheading {
  background:#fff;    
  font-size:50px;         
  height:100px;
  position: relative; 
    }
  
    .bottom {
  border-top: 1px solid #dddddd;    
  border-right: 1px solid #dddddd;    
  padding-top: 20px;
  text-align: center;
  padding-bottom: 10px;   
  width:1053px;       
  position:relative;
  margin: 0 auto; 
  font-size:15px;
  color: #fff;    
    }
    .list{
  width:300px; 
  border-bottom: 1px solid #dddddd;
  padding-bottom:10px; 
  display: inline-block; 
  margin-top:20px;
    }
  </code></pre>