title: how do I float a div over a background image in a different div
body: <p>In my CSS, I've created a menubar <code>&lt;div&gt;</code> and a header <code>&lt;div&gt;</code>. My intention is to have the menu line flush with the BOTTOM of the header's background image, so I've nested the menu inside the header. Alas, it's not working, and I can't figure out why. </p>
  
  <p>I've created a <a href="http://jsfiddle.net/dwwilson66/CJ3Gh/" rel="nofollow noreferrer">fiddle</a>, but I can't figure out how to upload the associated image file, so I've attached the header placeholder image<img src="https://i.stack.imgur.com/pefjp.jpg" alt="header background placeholder">. I've also uploaded a Wireframe <img src="https://i.stack.imgur.com/OhXvZ.jpg" alt="Wireframe"> demonstrating what I'm trying to make happen. </p>
  
  <p>If you're not able to view the fiddle, here's my HTML and CSS:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;!-- ------------------------------------------------------------------------&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;LINK rel="stylesheet" href="t2.css" type="text/css"&gt;
  &lt;/head&gt;
  &lt;!-- ------------------------------------------------------------------------&gt;
  
  &lt;body&gt;
      &lt;div id="header" &gt;
          &lt;div id="menubar"&gt;
              &lt;a href="#"&gt;home&lt;/a&gt;  |  &lt;a href="#"&gt;about&lt;/a&gt;  |  &lt;a href="#"&gt;contact&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body     {
      background-color: #FFFFFF;
      color: #000064;
      font-family: "Calibri", sans-serif;
      font-size: 12px;
      }
  
  h1    {
      background-color: #FFFFFF;    
      color: #000064;
      font-family: "Calibri", sans-serif;
      font-size: 2em;
      }
  
  h2    {
      background-color: #FFFFFF;    
      color: #000064;
      font-family: "Calibri", sans-serif;
      font-size: 1.5em;
      margin-left: 5%;
      }
  
  h3    {
      background-color: #FFFFFF;    
      color: #000064;
      font-family: "Calibri", sans-serif;
      font-size: 1em;
      margin-left: 20%;
      }
  
  p    {
      background-color: #FFFFFF;
      color: #000064;
      font-family: "Calibri", sans-serif
      font-size: 12px;
      padding: 0px 0px 0px 600px;
      margin: 0px:
      float: bottom;
      }
  
  a    {
      color: #000064;
      text-decoration: none;
      font-family: "Calibri", sans-serif;
      font-size: 14px;
      }
  
  a.visited {
      color: #640064;
      weight: bold;
      text-decoration: none;
      }
  
  #header {
      height: 120px;
      background-color: #ffffff;
      background-image: url(headerblock.jpg);
      background-repeat: no-repeat;
      background-position: top left;
      float: bottom;
      }
  
  #menubar {
      border-width: 1px 0px 1px 0px;
      border-color: #000064;
      border-style: solid;
      font-family: "Calibri", sans-serif;
      font-size: 14px;
      line-height: 16px;
      float: bottom;
      padding: 0px 0px 0px 600px;
      margin: 0px 0px 0px 0px;
      }
  
  #menubar a {
          text-decoration: none;
          color: #000064;
          float: bottom;
          }
  
  #menubar a.visited {
      text-decoration: bold;
      color: #000000;
      float: bottom;
          }
  </code></pre>
  
  <p>Anyone have any ideas?</p>