Div над содержимым?

Question

Я работаю над информационным бюллетенем, поэтому мне нужно сделать 2 столбца, и я использовал 2 divs на 50% от width, чтобы сделать это. Но проблема в том, что div справа выходит за контент.

Как я могу исправить это, пожалуйста? Спасибо-х

Вот fiddle

#yellow { 
 
    background-color: rgb(214, 196, 0); 
 
    width: 100%; 
 
    margin-bottom: auto; 
 
} 
 
#yellowL { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#yellowR { 
 
    position: relative; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#h1v2 { 
 
    color: rgb(67, 153, 186); 
 
    background-color: rgb(214, 196, 0); 
 
}

<div id="yellow"> 
 
    <h1 id="h1v2">Geschäftsverlauf/Déroulement des affaires</h1> 
 
    <div id="yellowL"> 
 
    <h1 id="h1v2">Offerten</h1> 
 
    <p> 
 

 
    </p> 
 
    <h1 id="h1v2">Projekte</h1> 
 
    <p> 
 

 
    </p> 
 
    </div> 
 
    <div id="yellowR"> 
 
    <h1 id="h1v2">Offres</h1> 
 
    <h2>Bruit</h2> 
 
    <p> 
 

 
    </p> 
 
    <h2>Sols</h2> 
 
    <p> 
 

 
    </p> 
 
    <h2>Déchets</h2> 
 
    <p> 
 

 
    </p> 
 
    <h2>EIE</h2> 
 
    <p> 
 

 
    </p> 
 
    <h2>Physique et acoustique du bâtiment</h2> 
 
    <p> 
 

 
    </p> 
 
    <h1 id="h1v2">Projets</h1> 
 
    <h2>Bruit</h2> 
 
    <p> 
 

 
    </p> 
 
    </div> 
 
</div>

Answer 1

добавить overflow: hidden; к вашему #yellow правило CSS

#yellow { 
    background-color: rgb(214, 196, 0); 
    width: 100%; 
    margin: auto; 
    overflow:hidden; 
} 

Answer 2

Вы можете добавить эту строку в DIV приходит после того, как эти два:

#personnel { 
    clear: both; 
} 

Я редактировал ваш код в скрипке. Это приведет к тому, что все содержимое, указанное выше, будет завершено до того, как начнется этот новый div.