title: CSS "wrapper" div background color not appearing in 2nd div?
body: <p><strong>"wrapper" div background color not appearing in 2nd div while height and width of both div is defined</strong>
  why background color is not applied in whole width and height as defined in wrapper its not applied in  #leftSideContent div </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/html"&gt;
  &lt;head&gt;
      &lt;title&gt;page practice&lt;/title&gt;
      &lt;style&gt;
          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;
          }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="wrapper"&gt;
          &lt;header&gt;
              &lt;p&gt;CSS Zen Garden&lt;/p&gt;
          &lt;/header&gt;
          &lt;div id="leftSideContent"&gt;
          &lt;aside id="firstAside"&gt;
            &lt;b&gt;Select A Design&lt;/b&gt;
            &lt;nav&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;JAMES KERLEY&lt;/a&gt; &lt;span&gt; by &lt;/span&gt;&lt;a href="#"&gt;ABCD&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;JAMES KERLEY&lt;/a&gt; &lt;span&gt; by &lt;/span&gt;&lt;a href="#"&gt;ABCD&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/nav&gt;
            &lt;/aside&gt;
          &lt;aside id="secondAside"&gt;
              &lt;b&gt;Archives&lt;/b&gt;
              &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;JAMES KERLEY&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;JAMES KERLEY&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/aside&gt;
  &lt;/div&gt;
            &lt;div id="content"&gt;&lt;p&gt; data&lt;/p&gt;&lt;/div&gt;
           &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/erum/GeSQ2/embedded/result/" rel="nofollow">fiddlelink</a></p>