Как сохранить левый div в верхней части?

Question

У меня есть эти divs.

HTML, заключается в следующем.

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

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

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

    </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*/ 
} 

Каждая вещь реагирует так же, как я хочу. Левый и правый divs имеют размер и положение, центральный div всегда должен адаптироваться к ширине между границами div.

Что я не могу понять, почему левый div всегда остается на дне, мне нужно, чтобы он всегда был сверху, как правый.

Это моя проблема, чтобы левый div оставался на вершине. Я не очень разбираюсь в css, но это те, которые мне удалось сделать в Firefox, Chrome и IE. Во всех них макет такой же.

Как я уже сказал, я не очень разбираюсь в css, и единственное, что я хочу, это макет для работы в большинстве браузеров. Я не против бросить все это, если мне нужно. Мне нужно только что-то работать.

UPDATE:

Похоже, эти работы просто отлично, если изолированы, так что здесь все вещи, и ошибка происходит.

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

Это происходит только в Firefox, IE и Chrome работают!

Благодарим за любую помощь заранее.

Answer 1

Использовать положение: относительное; вместо положения: абсолютный; при использовании float, возможно, это исправит вашу проблему ;-)

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; 


} 

он работает без фиксированных или относительно расположенных divs.