Как я могу сделать одинаковую высоту для двух разных элементов?

Question

У меня есть следующий код, мой div для row_container удерживает левый и правый div.
Я изо всех сил стараюсь, чтобы контейнер строки имел ту же высоту, что и вложенный левый и правый div.
Я пробовал высоту: авто;не работает.
Мне нужно, чтобы строка имела сплошной цвет фона

.row_container{

    margin:auto;
    width:420px;
    background-color:#FFFFFF;

    padding-top:15px;
    padding-bottom:15px;
    clear:both;


}
.left_row{
    float:left;
    width:200px;
    padding:5px;

}
.right_row{
    width:200px;
    float:right;
    text-align:justify;
    padding:5px;

}

Answer 1

Добавьте overflow: hidden к вашему .row_container

Answer 2

Плавающие div s закончатся из родительского, если вы не добавите clear: both в конце родительского.Это можно исправить двумя способами: вы можете вручную добавить очищающий div после родительского элемента, например:

<div class="row_container">
  <div class="left_row"></div>
  <div class="right_row"></div>
  <div style="clear: both"></div>
</div>

Или вы можете использовать CSS «clearfix», , такой как этот - это «современный» предпочтительный способ сделать это, потому что вы не добавляете ненужный HTML-код для исправления вашего CSS.