如何让左边的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工作。