title: How to fix the size of div?
body: <p>Hi i have taken one <code>&lt;a&gt;</code> tag and on hover of it one other div opens.
  and below  tag i have taken other div which display.
  but when I hover mouse on <code>&lt;a&gt;</code> tag other div opens but the regular div below the <code>&lt;a&gt;</code> tag change it's location and went below. so I want that although on hover of <code>&lt;a&gt;</code> tag new div opens the regular div should not change it's position.
  The new div should be open or display on existing div.</p>
  
  <p><a href="http://jsfiddle.net/jXDBN/" rel="nofollow">jsfiddle Demo for it</a></p>
  
  <p>My code :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Reading Image&lt;/title&gt;
      &lt;style type="text/css"&gt;
          .testtmpblock{
              display: none;
              background-color:black;
              min-height: 100px;
              width: 200px;
  
          }
          .tmpd{
              height: 100px;
              width: 100px;
              background-color: blue;
          }
          .tt{
              height: 120px;
              width: 100px;
              background-color: fuchsia;
              position: fixed;display: block;
          }
      &lt;/style&gt;
      &lt;script src="jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $(document).ready(function () {
        $(document).on('mouseenter', '.cart', function () {
  
  
            $(this).next(".testtmpblock").show();
        }).on('mouseleave', '.cart', function () {
            $(this).next(".testtmpblock").hide();
        });
    });
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="#" class="cart"&gt; Cart &lt;/a&gt;&lt;div class="testtmpblock"&gt;&lt;/div&gt;
      &lt;div class="tt"&gt;hello&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestion to do so ?</p>