title: Force div's inserted into a container by JQuery to remain on the same line
body: <p>I'm aware many similar questions have been asked but none seem to really answer my question. Essentially I have a container div in which I am inserting (through JQuery) new div's via draggable/droppable as the new div's fill the container they begin to jump down to a new line. I need them to stay on the same line and cause the container to scroll horizontally.</p>
  
  <p>Here's a part of my HTML</p>
  
  <pre><code>&lt;label for="builder"&gt;Builder Area:&lt;/label&gt;
  &lt;div id="builder"&gt;
      &lt;div class="layer" data-layer='0'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The "chunks" that are inserted into the layers:</p>
  
  <pre><code>&lt;div class='chunk' id='"+chunk_id+"'&gt;Chunk:"+chunk_id+"&lt;/div&gt;"
  </code></pre>
  
  <p>code to insert the "chunks":</p>
  
  <pre><code>$(".layer").droppable({
      accept: "#chunk_drag",
      activeClass: "ui-active",
      hoverClass: "ui-hover",
      drop: function(event, ui) {
  
          // Create a new Chunk
          var chunk = "&lt;div class='chunk' id='"+chunk_id+"'&gt;Chunk:"+chunk_id+"&lt;/div&gt;";
          chunk_id++;
  
          // Add the Chunk into the layer
          $(this).append(chunk);
  
          return true;
      },
  });
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.layer {
      border: 1px solid black;
      border-radius: 5px;
      box-shadow: 2px 2px 10px #222222;
      background-color: #EFEFEF;
      min-height: 50px;
      padding: 5px;
      margin: 5px;
      overflow-x: scroll;
  }
  
  .chunk {
      border: 1px solid black;
      box-shadow: 2px 2px 10px #222222;
      border-radius: 5px;
      background-color: #FAFAFA;
      padding: 5px;
      margin : 5px;
      overflow: auto;
      max-width: 400px;
      max-height: 200px;
      display: inline-block;
  }
  </code></pre>