Содержимое Div в неправильном положении

Question

Я пытаюсь поместить 3 divs в ту же строку, что и следующий код.

Мой CSS и HTML:

.row { 
 
    display: table; 
 
    width: 100% 
 
} 
 
.row > div { 
 

 
    display: table-cell; 
 
    height:30px; /*demo purposes */ 
 
} 
 
#left-bar { 
 
    width: 10%; 
 
    background-color: #FF0000; 
 
} 
 
#middle-bar { 
 
    width: 70%; 
 
    background-color: #6600FF; 
 
} 
 
#right-bar { 
 
    width: 20%; 
 
    background-color: #99FF99; 
 
}

<div class="row"> 
 
    <div id="left-bar"> here I have an accordion </div> 
 
    <div id="middle-bar"> heve a have my canvas </div> 
 
    <div id="right-bar"> and here I have an editor</div> 
 
</div>

Как-то содержание среднего бара (мой холст) расположен в правильном месте, но содержание других двух дивы находятся в внизу страницы, как вы можете видеть здесь see photo. Вы, ребята, знаете, почему это происходит?

Answer 1

После дальнейшего обсуждения проекта с вами в комментариях, и в чате, я думаю, вы должны принять подход, который использует flexbox вместо этого. Код довольно прямо вперед:

.container { 
 
    display: flex; 
 
} 
 

 
.left { flex-basis: 10%; background: #F99; } 
 
.right { flex-basis: 20%; background: #99F; } 
 
.middle { flex-basis: 70%; background: #9F9; }

<div class="container"> 
 
    <div class="left">L</div> 
 
    <div class="middle">C</div> 
 
    <div class="right">R</div> 
 
</div>

Answer 2

Я только управляемая ширина. Нет ничего проблематичного в этом.

.row { 
 
    display: table; 
 
    width: 100% 
 
} 
 
.row > div { 
 

 
    display: table-cell; 
 
    height:30px; /*demo purposes */ 
 
} 
 
#left-bar { 
 
    width: 20%; 
 
    background-color: #FF0000; 
 
} 
 
#middle-bar { 
 
    width: 60%; 
 
    background-color: #6600FF; 
 
} 
 
#right-bar { 
 
    width: 20%; 
 
    background-color: #99FF99; 
 
}

<div class="row"> 
 
    <div id="left-bar"> here I have an accordion </div> 
 
    <div id="middle-bar"> heve a have my canvas </div> 
 
    <div id="right-bar"> and here I have an editor</div> 
 
</div>