Dynamic size of left and right Div's according to content
<p>I am building a web page which has 3 DIV inside the main content left,right,right2.Here is a rough design:</p>

<pre><code>&lt;div id="content"&gt; 
    &lt;div id="left"&gt;&lt;/div&gt;
    &lt;div  id="right"&gt;&lt;/div&gt;
    &lt;div id="right2"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And here is the CSS for it:</p>

<pre><code>#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;
}
</code></pre>

<p>The issue is the 3 div's left,right and right2 do not fit according to the content size.Like if the main context increases,they stick to 700px height.If I give height:auto then the DIV aren't visible.
I have attached two images to help understand better:<a href="https://i.stack.imgur.com/EAiuI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EAiuI.png" alt="SNIP1"></a>
<a href="https://i.stack.imgur.com/0tMeA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0tMeA.png" alt="SNIP2"></a>
So basically I want to make the size dynamic of the left and right DIV's too,but cannot find a way to do it.Thank you for any responses</p>