title: Expand parent div width to fit children divs, horizontal scroll website
body: <p>I am making a horizontal scroll gallery style website, similar to this one:
  <a href="http://ericryananderson.com/book_2" rel="nofollow">http://ericryananderson.com/book_2</a></p>
  
  <p>I have a parent div, and within that div are child divs for each individual item of the gallery.</p>
  
  <p>Since I will not know how many items will be in the gallery/will change over time, how do I make the parent div size automatically in such a way that the gallery items remain on the same single line, allowing contents to overflow the width of the screen, again like in the site I have referenced above.</p>
  
  <p>It currently only behaves the way I want to if I manually set the width.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="parent-gallery-div"&gt;
      &lt;div class="gallery-item"&gt;&lt;/div&gt;
      &lt;div class="gallery-item"&gt;&lt;/div&gt;
      &lt;div class="gallery-item"&gt;&lt;/div&gt;
      &lt;div class="gallery-item"&gt;&lt;/div&gt;
      &lt;div class="gallery-item"&gt;&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.parent-gallery-div {
     height: 500px;
     float: left;
     margin-top: 40px;
  }
  
  .gallery-item {
     height: 420px;
     float: left;
     margin-right: 20px
  }
  </code></pre>