title: CSS drop down div
body: <p>I have a div box and a link on my page. I have written simple javascript that hides the div box at the beginning, then after clicking the link, the box appears again.</p>
  
  <p>The problem is, when the div appears, it pushes down contents bellow it. I would like it to just appear "above" them. Like a drop down menu but this is just a single div tag.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>  &lt;div class="slide-heading"&gt;
  &lt;div class="slide-laws"&gt;
   &lt;a href="#" class="toggle-slide-laws accessible-link"&gt;&lt;img src="/images/paragraph.jpg" alt="paragraph"&gt;&lt;/a&gt;
                  &lt;!-- THE LINK TOGGLES THE DIV BELLOW --&gt;
   &lt;div&gt;
    &lt;a href="/clientarea/utils/law/id/2832" rel="external-new-window" style="color: #ba8800;"&gt;&lt;strong&gt;124/2006 - O bezpečnosti a ochrane zdravia pri práci a o zmene a doplnení niektorých zákonov&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;
    &lt;a href="/clientarea/utils/law/id/2832/p/2/a/1" rel="external-new-window"&gt;§2, odsek 1&lt;/a&gt;&lt;br /&gt;
    &lt;a href="/clientarea/utils/law/id/2832/p/2/a/2" rel="external-new-window"&gt;§2, odsek 2&lt;/a&gt;&lt;br /&gt;
  
    &lt;a href="/clientarea/utils/law/id/2832/p/5/a/2" rel="external-new-window"&gt;§5, odsek 2&lt;/a&gt;&lt;br /&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;h3&gt;Kapitola 1&lt;/h3&gt;
  &lt;p&gt;Slide A&lt;/p&gt;
  &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
    &lt;/div&gt;
              &lt;p&gt;I DON'T WANT THIS PARAGRAPH TO BE PUSHED DOWN WHEN THE BOX APPEARS.&lt;/p&gt; 
  </code></pre>
  
  <p>This link toggles the div bellow it:</p>
  
  <pre><code>&lt;a href="#" class="toggle-slide-laws accessible-link"&gt;&lt;img src="/images/paragraph.jpg" alt="paragraph"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>When you click on the link, the box appears or disappears.</p>
  
  <p>My current styles:</p>
  
  <pre><code>#content div.slide-laws {
   float: right;
   width: 30em;
   line-height: 1.3em;
   font-size: .9em;
  }
  #content div.slide-laws a.toggle-slide-laws {
   float: right;
  }
  #content div.slide-laws div {
   text-align: left;
   float: left;
   margin-bottom: 4px;
  }
  </code></pre>