Динамический размер левого и правого Div в соответствии с содержанием

Question

Я строю веб-страницу, которая имеет 3 DIV внутри основного содержания слева, справа, right2.Here грубый дизайн:

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="right2"></div> 
</div> 

И вот CSS для него:

#content { 
    height:auto; 
    overflow:auto; 
} 
#left { 
    float: left; 
    min-height:700px; 
    width: 70px; 
    background-color:#6495ed; 
    overflow:hidden; 
} 
#right { 
    float: right; 
    min-height:700px; 
    width: 70px; 
    background-color:#6495ed; 
    overflow:auto 
} 
#right2 { 
    float: right; 
    min-height:700px; 
    width: 450px; 
    background-color:#FFFFF0; 
    overflow:auto; 
} 

проблема заключается в 3-х DIV влево, вправо и RIGHT2 не подходят по содержанию size.Like, если основной контекст увеличивается, они прилипают к 700px height.If дают высоту: авто то DIV не видны. Я приложил два изображения, которые помогут лучше понять: Поэтому в основном я хочу, чтобы размер динамика слева и справа DIV слишком, но не может найти способ сделать it.thank вам за любые ответы

Answer 1

Попробуйте использовать

display:table-cell; 
height:auto; 

В настоящее время я вижу эту проблему часто

JS Fiddle

Answer 2

Пожалуйста, пользователь ниже структуры div и ее css.

<div id="content" style="float: left; height: 700px; width: 100%;"> 
     <div class="content_blk">first block content</div> 
     <div class="content_blk">second block content</div> 
     <div class="content_blk">third block content</div> 
    </div> 

css 
#content{ 
    float: left; 
    height: 700px; 
    width: 100%; 
} 
.content_blk { 
    float: left; 
    height: 500px; 
    width: 100%; 
}