Выравнивание разделов на веб-странице

Question

Я пытаюсь создать веб-страницу с помощью HTML5, CSS3. У меня есть четыре списка, которые я выделил в 4 разных подразделениях. Другое подразделение #position_calls является родителем всех вышеупомянутых разделов.

Я хочу организовать эти четыре списка в массиве 2 * 2, где каждый ящик должен иметь одинаковую высоту. Я попытался сделать это, используя ключевое слово float, но это не сработало.

JSFiddle.

#tech_calls{ 
    float:left; 
    border:2px solid green; 
    width:49%; 
    height:50%; 
    margin:auto; 
} 
#quantech_calls{ 
    float:right; 
    border:2px solid green; 
    width:49%; 

} 

Я воздержусь от использования ключевого слова «позиция», поскольку это может помешать реагировать на страницы.

Кроме того, я не могу понять, почему родительская красная граница div #position_call не охватывает всю область (включая дочерние div). Но удаляя свойство float из всего дочернего div, он отлично работает. JSFIDDLE. А что с этим связано?

Любая помощь будет оценена по достоинству.

Я знаком с Javascript, если это помогает, спасибо!

Answer 1

Я добавил свойство отображения и один родительский div для двух верхних div и один для нижних двух div. Проверьте это here. Так,

<div style="display:flex"> tech_calls Div quantech_calls Div </div>

Аналогично для двух других.