html - проблемы с div

Question

Есть родительский блок:

#content
{
position: relative;
width: 92%;
margin: 0 auto;
height: 100%;
min-height: 500px;
border: 1px solid red;
}

И мне нужно 2 блока:

#news
{
position: relative;
float: left;
min-height: 400px;
width: 290px;
height: 100%;
}
#text
{
position: relative;
float: left;
margin-left: 20px;
min-height: 400px;
width: 625px;
height: 100%;
}

        <div id="content">
            <div id="news">
                ...
            </div>
            <div id="text">
                ...
            </div>
        </div>

Но 2-й текстовый блок не в одной строке с новостями. И, после изменения размера блока новостей и текста, блок контента тоже должен измениться, но это не ... Почему?

Answer 1

Это потому, что оба div внутри #content плавают, что выводит их из нормального потока документов. В #content измените height: 100%; на overflow: hidden; - это должно обеспечить размещение в нем плавающих элементов.

Answer 2

Возможно, вам понадобится добавить:

  display:inline;

до дел.

Кроме того, дважды проверьте, достаточно ли места в родительском div. Каждый браузер рассчитывает это по-своему. То есть, чтобы два элемента div отображались рядом, должно быть достаточно места для учета их ширины, полей и т. Д.