如何设置两个div相对？

Question

我该如何设置两个并排的div s，以便通过增加第二个高度div的第一个高度div同时增加。

我曾试图弥补这样的：

#content6 > #product-left{ 
    width: 355px; 
    float: left; 
    height: auto; 
} 
#content6 > #product-left ul li a{ 
    font-size:12px; 
} 
#content6 > #divide{ 
    background: url('../images/nav-btn.jpg') repeat-y; 
    float: left; 
    height: auto; 
    width: 20px; 
    position:absolute; 
    /* position: fixed; */ 
    display: block; 
    /* margin-left: 9px; */ 
    /*border: 1px solid;*/ 
} 
#content6 > #content-right{ 
    float: left; 
    width: 655px; 
    height: 300px; 
    margin-left: 10px; 
    /*border: 1px solid;*/ 
} 

这里是html页面：

<div id="content6"> 
     <div id="product-left"> 
      <ul> 
       <li> 
        <a href="#">PTFE COATED FIBERGLASS FABRICS</a> 
       </li> 
       <li> 
        <a href="#">PTFE COATED FIBERGLASS FARBIC SELF-ADHESIVE</a> 
       </li> 
       <li> 
        <a href="#">PTFE COATED FIBERGLASS BELTS</a> 
       </li> 
       <li> 
        <a href="#">PTFE COATED FIBERGLASS OPEN MESH DRYER BELTS</a> 
       </li> 
       <li> 
        <a href="#">SILICON RUBBER COATED FIBERGLASS FABRIC</a> 
       </li> 
       <li> 
        <a href="#">HIGH TEMP FIBERGALSS WOVEN-NONWOVEN FILTER BAGS</a> 
       </li> 
      </ul> 
     </div> 
     <div id="divide"> 

     </div> 
     <div id="content-right"> 

     </div> 
    </div> 

请做要紧。

Answer 1

显示#content6为表和它的孩子们的容器为表格单元格：

#content6{ 
    display:table; 
} 
#product-left{ 
    width: 355px; 
    height: auto; 
    display:table-cell; 
    background:#EEE; 
} 
#divide{ 
    background: url('../images/nav-btn.jpg') repeat-y; 
    height: auto; 
    width: 20px; 
    display: table-cell; 
    background:#F00; 
} 
#content-right{ 
    width: 655px; 
    height: 300px; 
    margin-left: 10px; 
    background:#CCC; 
    display:table-cell; 
} 

JSFiddle

注意，因为id S的关系是唯一的，眼前的后代CSS选择器是多余的位置。