title: white space created by hidden div
body: <p>I have three divs contained within a fourth div.</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;p onclick="Show_1(0)" &gt;1 &lt;/a&gt; &lt;/p&gt;
    &lt;p onclick="Show_2(0)"&gt;2 &lt;/a&gt; &lt;/p&gt;
    &lt;p onclick="Show_3(0)"&gt;3 &lt;/a&gt;&lt;/p&gt;
  
  &lt;div id="container"&gt;
      &lt;div id="div1"&gt;&lt;/div&gt;
      &lt;div id="div2"&gt;&lt;/div&gt;
      &lt;div id="div3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery: (function repeated for other divs)</p>
  
  <pre><code> function Show_3(x){
   $('#1').hide(x);
   $('#2').hide(x);
   $('#3').show(x);   
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#1, #2, #3{
      position: relative;
      left: 180px;
      top: -720px;
      height: auto;
      width: 510px;
      border-radius: 7px;
      padding: 5px;
      margin-top: 10px;
      margin-bottom: 50px;
      text-align: justify;
      margin-left: 10px;
      border: medium solid #000;  
  }
  
  #container2 { 
      position: relative; 
      left: 0px; 
      top: 0px; 
      width: auto; 
      height: auto; 
      background-color: #FFFFFF; 
      border: ridge; 
      width: 968px; 
      overflow: visible; 
      padding: 0px; 
      margin-top: 0px; 
      margin-right: auto; 
      margin-bottom: 0px; 
      margin-left: auto; 
  }
  </code></pre>
  
  <p>I use jquery to hide two of the three divs and show one depending on which button is clicked. The three divs are all relatively positioned and I have shifted the divs 1, 2 and 3 so they are all shown in the same location, ie, click a button and div 2 replaces div 1.</p>
  
  <p>The issue I am having is that there is an amount of white space showing below the end of the div that appears to be equal to the height of the div. For example, if I click the button to show div id=1, then the amount of white space below is equal to the height of div id=1. </p>
  
  <p>I think this is occurring because of shifting the div up with a relative position, but I do not know how to correct it with CSS or if I will need to use jquery.</p>
  
  <p>I have not been able to find this exact issue in other questions and any solutions to similar problems haven't worked.</p>
  
  <p>Any suggestions or experience with this problem before? Thanks in advance for any help suggestions.</p>
  
  <p>EDIT.</p>
  
  <p>I was trying to keep it simple, I have added some code above. It is all working well, except for the white space underneath.</p>
  
  <p>Thanks again.</p>