DIV container height

[anish007]

I have a problem with making div container height grow with respect to the other.

I have basically 3 div containers, the div container named main contains the other 2 containers left and right respectively. My left container floats left and my right container floats right. The right containers height changes in different pages according to content, and my left container always has the same content.
Now, how would i make my left container height grow so that it matches up with the right container, in different pages?.

Can anyone help me with this, i would really appreciate it.

<div id="main">
       <div id="left">
       </div>
       <div id="right">
       </div>
</div>

my attributes of div containers are:

#main{
        width: 746px;
        background: #FFFFFF;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left; }
 
#left {
    width: 148px;
    float: left;
    height: 100%;
    background-color: #5A6577; }
# right{
    zoom: 1;
    width: 595px;
    float: right;
}

[Dormilich]

a question, why do you need the right container? It seems that the right div contains the content, the left maybe navigation and the main container left and right div, but nothing else. Personally I'd drop the right container making the main container for the content. If you want the background color of the left container all trough to the bottom, why not using the border property of main?

#main{
        width: 595px;
        background: #FFFFFF;
        margin: 0 auto;
        border: 1px solid #000000;
        border-left: 148px solid #5a6577
        text-align: left; }
 
#left {
    width: 148px;
    margin-left: -148px; }
/* another possibility to draw the div onto the border:
    position: absolute;
    left: -148px; */