css float引起div自适应高度无效解决方法

<style>
#main{float:left;min-height:500px;}
#l{float:left;margin-bottom:10px;margin-right:10px;padding:6px 10px;width:117px;}
#r{float:right;margin-right:10px;padding-top:10px;width:864px;overflow:hidden;}
</style>
 
<div id="main">
  <div id="l"> 标题区域 </div> 
  <div id="r"> 内容区域</div> 
</div>