Hi, need help with my example. I need "green" divs to be aligned to the bottom of row. "Blue" div has dynamic height according to the length of text inside. Please help. Thanks
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
    .row{
      width:700px;
      border:1px black solid;
      height:auto;
      color:white;
    }
    .item{
      border:1px black solid;
      width:200px;
      float:left;
      
    }
    .top{
      height:100px;
      border:3px black solid; 
      background-color:red;
    }
    .middle{
      border:3px black solid;
      background-color:blue;
    }
    .bottom{
      height:50px;
      border:3px black solid;
      background-color:green;
          }
    .clear{
      clear:both;
    }
  </style>
  </head>
  
<body>        
  <div class="row">       
    <div class="item">                   
      <div class="top">        fixed height div                    
      </div>                
      <div class="middle">        dynamic height div                
      </div>                
      <div class="bottom">        fixed height div                 
      </div>            
    </div>            
    <div class="item">                   
      <div class="top">        fixed height div                    
      </div>                
      <div class="middle">        Lorem ipsum dolor sit amet consectetuer auctor In ac ipsum consequat. Nibh adipiscing sed Cras arcu nunc ligula vitae senectus consequat wisi. Nam Vestibulum ni        
      </div>           
      <div class="bottom">        fixed height div                 
      </div>                
    </div>    
    <div class="item">                        
      <div class="top">        fixed height div                    
      </div>                
      <div class="middle">        dynamic height div                
      </div>                
      <div class="bottom">        fixed height div                 
      </div>      
      <div class="clear">
      </div>            
    </div>
    <div class="clear">
    </div>       
  </div>   
  <div class="row">       
    <div class="item">                   
      <div class="top">        fixed height div                    
      </div>                
      <div class="middle">        dynamic height div                
      </div>                
      <div class="bottom">        fixed height div                 
      </div>            
    </div>            
    <div class="item">                   
      <div class="top">        fixed height div                    
      </div>                
      <div class="middle">        Lorem ipsum dolor sit amet consectetuer auctor In ac ipsum consequat. Nibh adipiscing sed Cras arcu nunc ligula vitae senectus consequat wisi. Nam Vestibulum ni        
      </div>           
      <div class="bottom">        fixed height div                 
      </div>                
    </div>    
    <div class="item">                        
      <div class="top">        fixed height div                    
      </div>                
      <div class="middle">        dynamic height div                
      </div>                
      <div class="bottom">        fixed height div                 
      </div>      
      <div class="clear">
      </div>            
    </div>
    <div class="clear">
    </div>       
  </div>    
  
</body>
</html>