title: scrollHeight value for a div containing images
body: <p>Here is a div, containing images, with max-height: 300px. Whenever a scrollbar is needed (this is the case here), I want to add a second div (the gray one) next to the first. I use scrollHeight to test the presence of a scrollbar.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="pictures"&gt;
          &lt;img src="test1.jpg" /&gt; &lt;img src="test2.jpg" /&gt; &lt;img src="test3.jpg" /&gt; &lt;img src="test4.jpg" /&gt;
          &lt;img src="test5.jpg" /&gt; &lt;img src="test6.jpg" /&gt; &lt;img src="test7.jpg" /&gt; &lt;img src="test8.jpg" /&gt;
          &lt;img src="test9.jpg" /&gt; &lt;img src="test10.jpg" /&gt; &lt;img src="test11.jpg" /&gt; &lt;img src="test12.jpg" /&gt;
          &lt;img src="test13.jpg" /&gt; &lt;img src="test14.jpg" /&gt; &lt;img src="test15.jpg" /&gt; &lt;img src="test16.jpg" /&gt;
          &lt;img src="test17.jpg" /&gt; &lt;img src="test18.jpg" /&gt; &lt;img src="test19.jpg" /&gt; &lt;img src="test20.jpg" /&gt;
          &lt;img src="test21.jpg" /&gt; &lt;img src="test22.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="scroll"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Some CSS:</p>
  
  <pre><code>div.container {
          width: 410px;
          max-height: 300px;
          overflow: auto;
      }
      div.container div.pictures {
          float: left;
          width: 390px;
      }
      div.container div.scroll {
          display: none;
          float: left;
          width: 30px;
          background-color: #eee;
      }
  </code></pre>
  
  <p>And the JS:</p>
  
  <pre><code>$(function() {
      $(".scroll").each(function() {
          var iParentHeight = $(this).parent()[0].scrollHeight;
          if (iParentHeight &gt; $(this).parent().css("max-height").replace(/[^-\d\.]/g, '')) {
              var iWidth = $(this).parent().width()+$(this).width();
              $(this).parent().css("width", iWidth);
              $(this).show();
              $(this).height(iParentHeight);
          }
      });
  });
  </code></pre>
  
  <p>On Firefox it's working. On Chrome and Safari though, there is some issue: sometimes (actually, most of the time for Safari) the gray dive does not appear when it should.</p>
  
  <p>I made some tests: without images, with X time the same image and with X different images. The issue is only appearing when there is X different images (maybe some loading time problem?).</p>
  
  <p>In fact, the output of scrollHeight is not always the same on Chrome and Safari. For FF, I always get the same result.</p>
  
  <p>Any idea would be appreciated!</p>
  
  <p>Edit: forgot the link with an example: <a href="http://toolboxebz.free.fr/test_scroll/test.html" rel="nofollow">http://toolboxebz.free.fr/test_scroll/test.html</a></p>