dynamische Größe von linken und rechten Div die nach Inhalt

Question

Ich bin den Aufbau einer Webseite, die 3 DIV innerhalb des Hauptinhalt hat links, rechts, right2.Here ist eine grobe Design:

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

Und hier ist die CSS für sie:

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

Das Problem ist, die 3 divs links, rechts und right2 passen nicht nach dem Inhalt size.Like, wenn die Haupt-Kontext steigt, sie stehen zu 700px height.If ich gebe height: auto dann sind die DIV nicht sichtbar. Ich habe zwei Bilder angehängt zu helfen, besser zu verstehen: Also im Grunde ich die Größe Dynamik des linken und rechten divs machen wollen, aber nicht einen Weg finden können it.thank Sie für alle Antworten

Answer 1

Try

display:table-cell; 
height:auto; 

Heute sehe ich dieses Problem häufig

JS Fiddle

Answer 2

zu tun Bitte Benutzer unter Div-Struktur und seine 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%; 
}