title: Can someone explain why Div hiding behind other Divs in HTML Layout?
body: <p>I was wondering if someone could explain to me why this is happening.  Sorry I am new to CSS/HTML.  I am working on creating and HTML layout for a basic page, currently I have three Divs.  I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.</p>
  
  <p>So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening?  I thought that since the space is already taken by my other two divs  that I would not have to use the 'top' property in order for the third div to display.  Why is it being hidden by the other divs?</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="leftside"&gt;&lt;/div&gt;
      &lt;div id="rightside"&gt; &lt;/div&gt;
      &lt;div id="narrow"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my CSS code:</p>
  
  <pre><code>#leftside{
  width: 50%;
  height: 50%;
  background-color: blue;
  float:left;
  }
  
  #rightside{
  width: 50%;
  height: 50%;
  background-color: red;
  float:right;
  }
  
   #narrow{
  width:100%;
  height:20%;
  background-color:black;
  }
  </code></pre>