increase div as content in it increases - css

Question

I have my HTML structure like this:
<div id="pagewrap">
<div id="header">
</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
I want to increase size of content div when either divs in content div increases as same size as other div.
How can I achieve this?
This is how my css is:
#pagewrap
{
width: 100%;
height: 100%;
}
#header{width: 100%;height:97px;position:relative;}
#left{position:absolute;left:0px;width:20%;background-color:#1C2326;}
#right{position:absolute;right:0px;width:80%;background-color:#2D3538;color:#fff;}
#footer{clear:both;height: 80px;background-color:#72D27C;}

Answer 1

If you want the wrapper to be affected by the contents' dimensions, you can't use position: absolute in the inner divs. Try floating them instead (and add overflow: hidden to the container to clear the inner floats):
#pagewrap { width: 100%; height: 100%; }
#content { overflow: hidden; }
#header { width: 100%; height: 97px; position:relative; }
#left { float: left; width: 20%; background-color: #1C2326; }
#right { float: left; width: 80%; background-color: #2D3538; color: #fff; }
#footer { height: 80px; background-color: #72D27C; }
http://jsfiddle.net/h4hbx/

Answer 2

I think maybe this fiddle is closer to what you had in mind. You can let the left div (static position, no float) set the height of content, and then pin the top and bottom of the right div to the content div. As left grows, content grows, and right is tied to content, giving you the effect you want. However, this is asymmetrical -- if you want either div to cause the other to follow it, that's another problem.
CSS:
html, body {
height: 100%;
}
#pagewrap {
width: 100%;
height: 100%;
}
#content {
position: relative;
}
#header {
width: 100%;
height:97px;
}
#left {
left:0px;
width:20%;
background-color:#1C2326;
color: #fff;
top: 0;
}
#right {
position:absolute;
right:0px;
width:80%;
background-color:#2D3538;
color:#fff;
bottom: 0;
top: 0;
}
#footer {
clear:both;
height: 80px;
background-color:#72D27C;
}