Auto Adjust Div Height

Question

Я хочу, чтобы div находился справа, чтобы соответствовать высоте div, которая находится слева. Дива справа всегда должен быть той же высоты, что и div слева. В левой части окна автоматически отрегулируйте его высоту. Оба div должны всегда иметь одинаковую высоту. Картинка стоит тысячи слов, поэтому, пожалуйста, взгляните на картинку ниже.

Вот изображение, которое объясняет мою проблему.

http://i44.tinypic.com/24pcpwj.jpg

JSFIDDLE

http://jsfiddle.net/zFqNH/

HTML

<div style="width:1053px;"> 
<section id="inside" style="overflow: hidden; width:310px; float:right; border-left:0;"> 
<ul> 
<p class="title">Funny</p> 

<li class="list"> 
    <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg"  width="100" height="67" style="float:left;padding-right:15px;" /></a> 
    <h3 style="font-size:20px;">Grumpy Cat</h3>   
</li> 
</ul> 
</section> 

<section id="inside"> 
<h2 class="subheading">Grumpy Cat<br/><p style="font-size:14px; margin-top:0px; font-weight:normal;"></p></h2><h2 style="border-bottom: 1px solid #dddddd; padding-top:10px;"></h2>          
<p class="section"></p>        

<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"> 
<br/>          
    <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"> 
<br/> 
     <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"> 
<br/> 

</div></div></section> 

CSS

#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; 
    } 

Answer 1

Вставка JavaScript ниже два див и использовать document.getElementById чтобы получить высоту левой DIV, а затем использовать document.getElementById изменить высоту правых дел.

<script> 
    var height = document.getElementById('div1').style.height; 
    document.getElementById('div2').style.height = height; 
</script> 

Документация:
http://www.w3schools.com/jsref/prop_style_height.asp