div+css 左右两列自适应高度 ,以及父级div也跟着自适应子级的高度(兼容各大浏览器)

<style type="text/css" media="screen">
<!--
#main {width:500px;_height:300px;min-height:300px; background:#aaffaa; border:1px solid #600; float:left;overflow:hidden;_overflow:visible;}
#sidebar {width:200px;background-color:#ff0000; float:left;  border:1px solid #060; }
#content {width:200px; background:#0000ff;  border:1px solid #006; float:left;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
-->
</style>
</head>
<body>
<div id="main">
    <div id="sidebar" class="row">
         <p>Layer - left</p>
    </div>
    <div id="content"  class="row">
         Layer - right<br />
          right<br />
       right<br />
       right<br />
       right<br />
       right<br />
       right<br />
       right<br />
       right<br />
       right<br />
       right<br />
       right<br />   
    </div>
</div>
</body>