"wrapper" div background color not appearing in 2nd div while height and width of both div is defined why background color is not applied in whole width and height as defined in wrapper its not applied in #leftSideContent div
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>page practice</title>
<style>
body
{
background-image: url("stripe_f4b448da7a886ae96535955b68f80e83.png");
background-repeat: repeat;
}
#wrapper
{
width:700px;
margin-left:300px;
margin-right:300px;
background-color:#deb887;
}
#firstAside
{
border:8px aquamarine solid;
margin-top: 20px;
margin-left: 20px;
width:200px;
height:375px ;
}
#secondAside
{
border:8px aquamarine solid;
margin-top: 20px;
margin-left: 20px;
width:200px;
height:100px ;
}
nav
{
margin-top:10px;
margin-left: 3px;
}
#leftSideContent
{
float: left;
width: 200px;
height: 700px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<p>CSS Zen Garden</p>
</header>
<div id="leftSideContent">
<aside id="firstAside">
<b>Select A Design</b>
<nav>
<ul>
<li><a href="#">JAMES KERLEY</a> <span> by </span><a href="#">ABCD</a></li>
<li><a href="#">JAMES KERLEY</a> <span> by </span><a href="#">ABCD</a></li>
</ul>
</nav>
</aside>
<aside id="secondAside">
<b>Archives</b>
<nav>
<ul>
<li><a href="#">JAMES KERLEY</a></li>
<li><a href="#">JAMES KERLEY</a></li>
</ul>
</nav>
</aside>
</div>
<div id="content"><p> data</p></div>
</div>
</body>
</html>
Just add overflow: hidden; to your #wrapper declaration block.