Problem with my background

[shaunysj]

Hi guys, I currently have no idea why my website will look like that(Below pic). The background doesn't height doesn't automatically expand or something?
Can anyone kindly explain to me why it will look like that? What did i do wrongly?? How to solve it? Thanks a lot...


\2wg9bb4.png

Here is my HTML code:

<div id="mainContent">
            <div id ="article">
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
            </div>
            
             <div id="breakingNews">
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
                <p>testing</p>
            </div>
            
   
          </div>

Here is my css code:

#mainContent {
    
    width:70%;
    margin:40px auto;
    background-color: white;
    border-radius:5px;
    padding:10px;
    
}

#article {
    border:1px solid black;
    float:left;
    width:40%;
}

#breakingNews {
     width:30%;
     border:1px solid black;
     float:left;
     margin-left: 40px;
}

[Stevie D]

Add overflow:hidden; to the #mainContent. You need this whenever you have an element that only contains floated elements in order to get it to expand to contain them.

[shaunysj]

Add overflow:hidden; to the #mainContent. You need this whenever you have an element that only contains floated elements in order to get it to expand to contain them.

thanks! it works perfectly. Explanation is clear