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