title: CSS divs don't stack in proper vertical order
body: <p>I have two divs. I want one with id "hor_rule" to appear beneath the other with id "header".</p>
  
  <p>I was under the impression that this should happen automatically. I must be making some silly error.</p>
  
  <p>--- The HTML file ---</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;ARCS &lt;~~ the title ~~&gt;&lt;/title&gt;
      &lt;style type="text/css" media="all"&gt;@import "css/styles.css";&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="header"&gt;
      &lt;span id="header_title"&gt;&lt;~~ the title ~~&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="hor_rule"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>--- The CSS File ---</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  #header { 
  float:left; 
  width:64%;
  vertical-align:top;
  margin:12px;
  }
  
  #header_title { 
  font-family: Arial;
  font-size:xx-large;
  font-weight: bold;
  }
  
  #hor_rule{
      height:1px;
      background-color:#999;
  }
  </code></pre>