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;
}