title: Fixed position div with 'top' relative to parent div
body: <p>The basic bootstrap template <a href="http://twitter.github.io/bootstrap/examples/hero.html" rel="nofollow">here</a> has a fixed bar at the top. I want to place a <code>div</code> directly underneath it.</p>
  
  <p>Here's the HTML of that bar (copied straight from the page's source so there are CSS class references):</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a href="#" class="brand"&gt;Project name&lt;/a&gt;
        &lt;div class="nav-collapse collapse" style="height: 0px;"&gt;
          &lt;ul class="nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li class="nav-header"&gt;Nav header&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;form class="navbar-form pull-right"&gt;
            &lt;input type="text" placeholder="Email" class="span2"&gt;
            &lt;input type="password" placeholder="Password" class="span2"&gt;
            &lt;button class="btn" type="submit"&gt;Sign in&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my attempt at a <code>div</code> to go underneath it:</p>
  
  <pre><code>&lt;div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;"&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>It almost works but the problem with this is the 'top:40px;'. When you resize the screen, the fixed bar at the top changes height.</p>
  
  <p>How do I make it so that it always sits directly underneath the bar regardless of the bar's height? Bonus points for how to center it horizontally without using <code>&lt;center&gt;</code></p>
  
  <p><strong>Edit</strong>: for the horizontal centering thing, i tried wrapping my div in a div with 100% width and then adding 'margin:0 auto' to it, but that doesn't work with fixed position</p>
  
  <p><strong>Edit2</strong>: <a href="http://jsfiddle.net/MgcDU/5400/" rel="nofollow">here</a> is the jsfiddle. line 38 of the html is my attempt, everything above that is the nav bar div.</p>