How to stop page elements from moving after calling the hide() method.

How to stop page elements from moving after calling the hide() method.

I have just started using jquery and have an embarrising simple question.

When i call the hide method how do i stop other page elements from moving.

In the example below when i hide the control div. the three links move up the screen.

Does anyone know how to solve this?

 

Thanks

  1. <html>
     <head>
      <script type="text/javascript" src="jquery-1.4.1.js"></script>


  2.   <SCRIPT language="JavaScript">
  3.    $(document).ready(function() {SetUpEvents();});
  4.    function SetUpEvents()
       {
        $('#hide').click(function(){Hide();});
        $('#show').click(function(){Show();});
        $('#toggle').click(function(){Toggle();});
       } 
       
       function Toggle()
       {
        $('#control').toggle('slow');
       }
       
       function Hide()
       {
        $('#control').hide('slow');
       }
       
       function Show()
       {
        $('#control').show('slow');
       }
      </script>
     </head>
     <body>
      <div id="control">
       Test div buttons should toggle my visibility
      </div>
      <a href="#" id="hide">hide</a>
      <a href="#" id="show">show</a>
      <a href="#" id="toggle">toggle</a>
     </body>
    </html>