Div以上內容？

Question

我正在製作新聞通訊，所以我必須製作2列，並使用2個div來做width的50％。 但問題是，右側的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開始之前完成。