I want to add a background-color to a container with three div class floats inside: one at the top, and two side-by-side beneath it. When I add a bg color to the .site-container in CSS, it is only adding a bg color to div class=top. How can I get the background to cover div class=left and right as well? Thank you! Here's my CSS code:
body{
background-color:white;
}
.site-container{
width:70%;
margin:auto;
margin-top:200px;
background-color: blue;
}
.clr{
clear:both;
}
.left{
float:left;
width:50%;
}
.right{
float:right;
width:50%;
}
HTML code:
<body>
<div class="site-container">
<div class="top">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia deleniti odio quae eligendi ab voluptatibus eos praesentium, eaque repellendus, nulla nostrum voluptate sit voluptates officia explicabo cum laboriosam dolorem architecto.</p>
</div>
<div class="left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ex amet voluptates nemo libero aliquid aperiam tempore error ratione molestiae, voluptate rerum eaque vero! Quibusdam corporis quidem dolorum eum aliquam.</p>
</div>
<div class="right">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error, pariatur, temporibus officiis doloribus atque hic deleniti officia dolorem sit optio magni facilis laborum, quos doloremque quasi laudantium vero! Adipisci, voluptates!</p>
</div>
</div>
</body>
I switched the position of the float clear fixes and I'm not sure what else to do... very beginner!