title: Short script (<50 lines) works in jfiddle but not browser
body: <p>I was using a Horizontal-scrolling image gallery for a project. </p>
  
  <p>Recently the scrolling stopped working, and I have been trying to figure out why. Eventually I decided to go back to the source of this part of the project and work up, but I can't even get it running. </p>
  
  <p>I must be doing something simple wrong- any ideas?</p>
  
  <p><a href="http://jsfiddle.net/7SLN7/2/" rel="nofollow">the fiddle</a></p>
  
  <p>My Code:</p>
  
  <p>HTML
      </p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript" src="./jquery-2.0.2.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="./waterfall3.css" /&gt; 
  &lt;script type="text/javascript" src="./waterfall.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="media"&gt;
  &lt;div class="imageContainer"&gt;
  &lt;div class="image"&gt;&lt;a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"&gt;&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="image"&gt;&lt;a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"&gt;&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="image"&gt;&lt;a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"&gt;&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""&gt;&lt;/a&gt;&lt;/div&gt;    
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var imageWidth = 300;
  $(".imageContainer").width($(".image").length*imageWidth);
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.media
  {
  width: 300px; 
  height: 288px; 
  float: left;
  display: inline-block;
  overflow-x: auto;
  -ms-overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-y: hidden;
  white-space: nowrap;
  }
  
  .image
  {
  float: left;
  height: 240px;
  width: 300px;
  margin: 0;
  text-align:center;
  border: 0px solid white;
  }
  
  .imageContainer
  {
  float:left;
  }
  </code></pre>