title: Div "margin-top" is relative to body instead of parent div
body: <p>The HTML for my page:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
    background-color: #0cf;
    border: 1px solid black;
    height: 20%;
    width: 100%;
  }
  
  #menu {
    background-color: #ff0;
    color: black;
    font-size: 1.5em;
    height: 29%;
    width: 70%;
    margin-top: 9%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;div id="menu"&gt;
      this is menu
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The problem is that the &quot;#menu&quot; has its margin relative to &quot;body&quot; element I want its margin to be relative  to &quot;#header&quot;.</p>
  <p>You can probably see that i am creating a fluid grid here, and margin of my &quot;#menu&quot; div should be relative to the &quot;#header&quot; otherwise it will not work(see the screen shots).</p>
  <p>Here are the screenshots.
  First one at resolution of 1024*768.</p>
  <p>Second is at resolution of 1280*1024</p>
  <p><img src="https://i.stack.imgur.com/Xd8GL.png" alt="1024*768" /></p>
  <p><img src="https://i.stack.imgur.com/cVbRy.png" alt="1280*1024" /></p>
  <p>In second screenshot the &quot;#menu&quot; is a little high from the bottom of &quot;#header&quot;.</p>
  <p>My question is how can i apply a margin which changes as the height of &quot;#header&quot; changes?</p>
  <p>I have already read about the &quot;margin collapsing&quot; thing but i don't think this is what's happening here,as my parent div has a border.</p>