title: jquery margin won't adapt on first click
body: <p>If you click on an element with class "clickable", a div "display" will appear.
  The height of the "display" divs are not equal.
  Depending on the height of this div, the top-margin of another div "container" should adapt.
  However, this works on the first click, but not for consecutive clicks: from the second "clickable" on there are always two clicks necessary: the first click will load the content, the second click will adapt the top-margin.</p>
  
  <pre><code>$(document).ready(function(){
  var display = $("#display");
  var clickable = $(".clickable");
  display.hide();
  
  clickable.click(function(){
      var clickableid = clickable.attr('id');
      $.ajax({
          cache: false,
          type: 'get',
          url: 'process.php?id=' + clickableid,
          dataType: 'html',
          success: function(content) {
              $('#display').load('process.php?id=' + clickableid);
              display.show(function(){
                  var newmargin = $("#display").height();
                  $('#container').css({"margin-top": + newmargin});
              });
          }
      });
  });
  </code></pre>
  
  <p>Instead of:</p>
  
  <pre><code>    display.show(function(){
          var newmargin = $("#display").height();
          $('#container').css({"margin-top": + newmargin});
      });
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>    display.show()
      var newmargin = $("#display").height();
      $('#container').css({"margin-top": + newmargin};
  </code></pre>
  
  <p>Unfortunately to no avail: only the way of showing up was different.
  Anyone having an idea?</p>