div height problem

[nepoverljiv]

Hi, I try to make two layer inside one layer, and one layer who will be "pull" these two to make same heights for both layers, left and right. Shortly, my code is:

    <div id="main-body">  
        <div id="left">
                   left
        </div>  <!-- left-->

        <div id="right">
                      right
        </div>  <!-- right--> 
        
        <div id="floatanchor">&nbsp;</div> 
        
        </div> <!-- main-body -->

and CSS is:

#main-body {
    margin: 0 auto;
    width: 987px;
    height: auto;
    margin-top: 0px;
}

#left{
    width:683px;
    float: left;
    background-color: fuchsia;
    height: auto;
}

#right{
    width:304px;
    float: right;
    background-color: aqua;
    height: auto;
}

#floatanchor {
    width: 987px;
    height: 10px;
    clear: both;
    background-color: blue; 
}

So, how to make right layer to have same height, like left layer, in situation where in left layer have some text, and right layer is have just one word. Anyone help me?

[nepoverljiv]

Solutions:

#main-body {
margin: 0 auto;
width: 987px;
height: auto;
margin-top: 0px;
overflow: hidden;
}

#left {
width:683px;
float: left;
margin-bottom: -2000px; padding-bottom: 2000px;
}

#right {
width:304px;
float: right;
margin-bottom: -2000px; padding-bottom: 2000px;
}