#fl1 {
        float : left ;
        width : 500px ;
        height : 300px ;  <<<<i dont know this
        background : red ;
}

#fl2 {
        width : 50% ;
        height : 100px ;    <<< fixed size
        background : black ;
}
#fl3 {
        width : 50% ;
        height : * ;        <<< how do i calculate this , "auto" generates                                 <<<< based on content
        background : green ;
}



         <div id="fl1">
             <div id="fl2"></div>
             <div id="fl3"></div>
         </div>