保持兩個div的長度相同

Question

我有兩個div，main和side，我希望確保保持長度較長者。

目前，主要比側面長，我怎麼能讓他們保持相同的高度，這取決於內容？

#main{ 
width:818px; 
padding:20px; 
float:left; 
background-color:white; 
border-top-left-radius:20px; 
border-left:1px solid #909090; 
border-top:1px solid #909090; 
} 

#side{ 
float:left; 
width:230px; 
padding:20px; 
background-color:#FEF5CA; 
border-top:1px solid #909090; 
border-right:1px solid #909090; 
} 

謝謝。

Answer 1

display: table-cell; 

CSS3是你的朋友;-)

Answer 2

爲了使用顯示：表單元格，你將需要刪除浮動從您的主要和次要屬性。然後將顯示：表格單元添加到兩者，它會做你想做的。

Answer 3

什麼方法將是最好的替換表格佈局divs？

重新格式化所有與顯示屬性一樣的表格。 ;）

HTML

<div class="table-div" style="width:100%"> 
    <div class="tr-div"> 
     <div class="td-div">td-div 1a</div> 
     <div class="td-div">td-div 2a</div> 
     <div class="td-div">td-div 3a</div> 
    </div> 
    <div class="tr-div"> 
     <div class="td-div">td-div 1b</div> 
     <div class="td-div">td-div 2b</div> 
     <div class="td-div">td-div 3b</div> 
    </div> 
</div> 

CSS

.table-div{display:table} 
.tr-div{display:table-row} 
.td-div{display:table-cell;border:1px solid silver} 

jsFiddled這裏http://jsfiddle.net/sPm9M/

Answer 4

你也許能夠給每個把他們班。這將確保您的所有屬性都相同。你也可以這樣做：

CSS

#main,#side { 
    width: //the width 
    } 

    #main { 
    width:818px; 
padding:20px; 
float:left; 
background-color:white; 
border-top-left-radius:20px; 
border-left:1px solid #909090; 
border-top:1px solid #909090; 
    } 

    #side { 
    float:left; 
width:230px; 
padding:20px; 
background-color:#FEF5CA; 
border-top:1px solid #909090; 
border-right:1px solid #909090; 
    }