Подразделения Div-высоты, соответствующие sub divs

Question

Я пытался разделить мои divs, чтобы они сломались друг под другом на странице. Проблема, с которой я сталкиваюсь (как показано на рисунке), заключается в том, что я не могу получить высоту div, чтобы она была такой же, как и дочерние div. В этом примере у меня есть мои «box1» и 2 «sub-boxes». В подболоках есть текст внутри, но основной div, который содержит их, не имеет высоты.

Это проблема, потому что, когда я пытаюсь добавить в divs под этим, они просто вставляются в том же месте, что и верхний.

Если моя проблема не ясно, пожалуйста, скажите, и я попытаюсь разработать

Вот краткий фрагмент HTML

<div id="aboutus-box1"> 
<div id="aboutus-box1sub1"> 
    <span id="subtitle">What is this site all about</span><br/> 
    Information and details about the site, point put forwards to new users to look to the help page for support and to look at the <a id="textlink">site rules</a> TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------ 
</div> 
<div id="aboutus-box1sub2"> 
    <span id="subtitle">Our History</span><br/> 
    How the group came about, where different members came from, how the idea came about TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------ 
</div></div> 

И некоторые CSS

#aboutus-box1{ 
    width:100%; 
    margin-bottom:1%; 
    margin-top:1%; 
    } 
#aboutus-box1sub1{ 
    height:100%; 
    width:49.5%; 
    float:left; 
    } 
#aboutus-box1sub2{ 
    height:100%; 
    width:49.5%; 
    float:right; 
    margin-left:1% 
    } 

Вот JSFiddle Demo

Answer 1

Родитель (# ABOUTUS-box1) нужен другой стиль: overflow: hidden;

Answer 2

Вам нужно очистить ваши поплавки, чтобы возобновить макет.

Существует много способов сделать это, самым простым из которых является очищающий div после вашего последнего плавающего элемента.

<div class='clear'></div> 

CSS:

.clear { 
    clear:both; 
} 

Answer 3

Поскольку вы используете float вам нужно использовать также clear свойство, чтобы родитель сохранить height.

#aboutus-box1:after{ 
    content:" "; 
    display:block; 
    clear:both; 
} 

Вы можете проверить здесь More About Floats и другие способы использования clear собственности.

Ваш Fiddle demo