title: Div within a div still taking up space even though display:none?
body: <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $("select#choosebook").change(function(){
      $(".title").slideDown("medium");
  });
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="booktitle"&gt;
      &lt;p&gt;
      &lt;font color="red"&gt;*&lt;/font&gt;Book:
      &lt;select id="choosebook"&gt;
          &lt;option&gt;Choose a Book...&lt;/option&gt;
          &lt;option&gt;Add new Book...&lt;/option&gt;
      &lt;/select&gt;
      &lt;div class="title" style="display:none"&gt;**
          &lt;font color="red"&gt;*&lt;/font&gt;Title: &lt;input type="text"&gt;
      &lt;/div&gt;
      &lt;font color="red"&gt;*&lt;/font&gt;Page: &lt;input type="text" class="page"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The div with class "title" still takes up space between the "Book:" input and the "Page:" input, even though it's hidden! Other divs on this web page don't. How can I make it take up no space until the javascript is activated to slide it down?</p>
  
  <p>Thank you!</p>
  
  <p>EDIT: As requested, here is a screenshot of the problem. I'm trying to get rid of the gap between the Book input and the Title input.
  Before the 'title' input slides down:
  <img src="https://i.stack.imgur.com/WV6Dr.jpg" alt="The stupid gap before the &#39;title&#39; input slides down.">
  After the 'title' input slides down:
  <img src="https://i.stack.imgur.com/diZUD.jpg" alt="The stupid gap after the &#39;title&#39; input slides down."></p>
  
  <p>And here is my CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      @import url("layout.css");
      .page {
          width: 50px;
      }
      .URL, .booktitle {
          margin-left: 24px;
          display:none;
      }
      .title {
          display: none;
      }
      .newtag {
          display:none;
      }
      .amount, .addtag {
          width: 100px;
      }
      .details {
          width: 275px;
      }
  &lt;/style&gt;
  </code></pre>