保持两列与CSS的高度相同

Question

我在容器中有两列。他们都有动态的高度和不同的颜色背景。无论内容如何，​​我都希望这两列始终保持较高的大小。我怎样才能实现这与CSS？

HTML：

<div id="profile-bottom"> 
    <div id="bottom-left"> 
    </div> 
    <div id="bottom-right"> 
    </div> 
</div> 

我试图使用显示：表和表单元格，但我似乎无法得到它的工作。

CSS：

#profile-bottom { 
    display: table; 
    position: relative; 
    width: 450px; 
    height: auto; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    border-radius: 0px 0px 4px 4px; 
    overflow: hidden; 
    z-index: 10; 
} 

#bottom-left { 
    display: table-cell; 
    position: relative; 
    float: left; 
    margin: 0px 0px 0px 0px; 
    padding: 95px 20px 20px 20px; 
    height: auto; 
    width: 150px; 
    box-shadow: rgba(0, 0, 0, 0.147059) 0px 1px 8px 0px; 
    background-color: #fff; 
    z-index: 50; 
} 

#bottom-right { 
    display: table-cell; 
    position: relative; 
    float: left; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 20px 20px 20px; 
    height: auto; 
    min-height: 96px; 
    width: 220px; 
    background-color: #f5f5f5; 
    z-index: 10; 
} 

Answer 1

在这里你去： http://jsfiddle.net/ELKuf/

<div class="layout"> 
    <div class="columns-container"> 
     <div class="column">dasdas das das dsa kdas kdhsajk dhkas dhkjas kdsa dsa dsa as das dsa dsa das das das das dsa d asdsa 
</div> 
     <div class="column"> dsa dsa dsa das dsa</div> 
    </div> 
</div> 


layout { 
    display: table; 
} 

.layout .columns-container { 
    display: table-row; 
} 

.layout .columns-container .column { 
    display: table-cell; 
    border: 1px solid black; 
    width: 100px; 
}