如何讓左邊的div對齊頂部？

Question

我有這些div。

的HTML如下。

<div id="full-size"> 
    <div id="left-content"> 

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

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

    </div> 
</div> 

那四個的div的CSS：

#full-size{ 
    height:100%; 
    width:100%; 
    overflow:auto; 
    top:5px; 
    position:relative; 
    padding: 1px 220px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    display:table; 
    table-layout:fixed; 

    background-color:#F00; 
} 
#left-content { 
    width:190px; 
    border:1px solid #000; 
    overflow:auto; 
    padding: 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box;   
    background-color:#222; 
    margin-left: -200px; 
    float:left; 
    border:1px solid #000; 
    display:table-cell; 
} 
#center-content { 
    height:100%; 
    width: 100%; 
    border:1px solid #000; 
    overflow:auto; 
    display:inline-block; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box;  
    background-color:#222; 
    padding:5px; 
    display:table-cell;  
} 
#right-content { 
    width:190px; 
    border:1px solid #000; 
    overflow:auto; 
    float:right; 
    padding: 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box; 
    background-color:#222; 
    margin-right: -200px; 
    display:table-cell; 
    background-color:#222; 
    position: absolute; /*newly added*/ 
    right: 220px; /*newly added*/ 
    top: 5px;/*newly added*/ 
} 

每一件事響應完全像我想要的。左右分區的大小和位置都是固定的，中心分區必須始終適應邊界分區之間的寬度。

我無法弄清楚，爲什麼左邊的div總是停留在底部，我需要它始終位於正確的頂部。

這是我的問題，讓左邊的div留在上面。我不太瞭解css，但是這些都是我在Firefox，Chrome和IE中完成的工作。在他們所有的佈局是一樣的。

正如我所說我不明白那麼多關於CSS，唯一我想要的是這種佈局在大多數瀏覽器中工作。如果我需要，我不介意把它全部扔掉。我只需要一些工作。

UPDATE：

貌似這些工作就好了，如果孤立的，所以這裏所有的東西和錯誤發生。

http://jsfiddle.net/wr0r8msu/1/

這只是發生在Firefox，IE和Chrome正在努力！

感謝您的任何幫助提前。

Answer 1

使用位置：相對;而不是位置：絕對;當使用浮動，也許這將解決您的問題;-)

Answer 2

我修改了你的CSS了一下。

#full-size{ 
    height:100%; 
    width:100%; 
    overflow:auto; 
    top:5px; 

    padding: 1px 220px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    display:table; 
    table-layout:fixed; 

    background-color:#F00; 
} 
#left-content { 
    width:190px; 
    border:1px solid #000; 
    overflow:auto; 
    padding: 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box;   
    background-color:#222; 
    margin-left: -200px; 
    float:left; 
    border:1px solid #000; 
    display:table-cell; 
} 
#center-content { 
    height:100%; 
    width: 100%; 
    border:1px solid #000; 

    display:inline-block; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box;  
    background-color:#222; 
    padding:5px; 
    display:table-cell;  
} 
#right-content { 
    width:190px; 
    border:1px solid #000; 

    float:right; 
    padding: 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box; 
    background-color:#222; 
    margin-right: -200px; 
    display:table-cell; 
    background-color:#222; 


} 

它沒有固定或相對定位的div工作。