cant increase container size

I am using master pages with asp.net.
I have a layout problem as the content area which is the main page area has an unfixed size.
If the content area has a size greater than left area then the left area wont also increase in size.

How do i change the left area container to increase in height if the container next to it does (content)? I have dynamic  height size pages.

<style  type ="text/css" >
     body { 
    margin: 0px;
    padding: 0px;
       background-color :#e8feff;
         width:1100px;
} 
/*to float an image or area you change the normal webflow and objects can appear to the sid eof it on the same level.
you must clear float to stop using it eg clear: left;*/
 
.top { 
        height : 200px;
        border  :1px outset  black;
        background-color :#850d0d;
        width:1100px;
  
        }
 
   
.top2 { 
        
        border  :1px outset  black;
      background-color :black;
        width:1100px;
       
}     
 
.left  
{        float:left; 
        border  :1px outset  black;
        /*background-color :#000000;*/
        background-color :#850d0d;
        
        width:180px;
         height:900px;
                  }
        
.content {  
        float:left;
       
        background-color :black;
        width:915px;
       /* height:900px;*/
        border  :1px outset  black;
        
          }   
             
 
  .footer{  clear:left;
        border  :1px outset  green;
         background-color :black;
        width:1100px;
        font-size:10px;
    	font-family:verdana;
    	font-weight:bold;
    	color:yellow;
        }

Select allOpen in new window