How to make two column with same height

HTML 

<div id="wrapper">
      <div class="left">
            left <br />left <br />left <br />
      </div>
      <div class="right">
            right<br />left <br />left <br />left <br />left <br />left <br />left <br />
       </div>
       <div class="clear"></div>
</div>

CSS 

*{padding:0px; margin:0px;}
#wrapper{overflow:hidden;}
.left{background:#333;width:250px;float:left;margin-bottom:-2000px;padding-bottom:2000px;} .right{background:red;width:750px;float:left;margin-bottom:-2000px;padding-bottom:2000px;} .clear{clear:both;}