title: How to make div push down everything below
body: <p>So my question is how do I make a div push down everything that comes after it, even if the elements that come after have a fixed positions.</p>
  
  <p>Let me explain the scenario:</p>
  
  <p>I have the following structure:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div class="top_menu"&gt;
     &lt;/div&gt;
     &lt;div class="content"&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Where <code>.top_menu</code> has a <code>position:fixed;</code> and <code>top:0;</code></p>
  
  <p>Now using JavaScript I insert a new div right after <code>&lt;body&gt;</code> and wrap the rest in another div to end up with something that looks like this.</p>
  
  <pre><code>&lt;body&gt;
     &lt;div id="notice_bar"&gt;
     &lt;/div&gt;
     &lt;div id="wrap"&gt;
        &lt;div class="top_menu"&gt;
        &lt;/div&gt;
        &lt;div class="content"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now is there a way to make the <code>#notice_bar</code> div always push down the <code>#wrap</code> div with all its content?</p>
  
  <p>Changing the <code>position:fixed;</code> attribute of <code>.top_menu</code> is not an option because this script I’m working on should work on any given website.</p>
  
  <p>I’m really running out of ideas here so any tips will be greatly appreciated. Thanks!</p>
  
  <p>EDIT: Here is the specific scenario were I'm working on right now in case anyone feels generous enough to play arroudn with it :) <a href="http://mirlostudio.com/choeducators" rel="nofollow">http://mirlostudio.com/choeducators</a></p>