title: Getting a horizontal scroll bar within a 100% div
body: <p>I'm trying to build a quick overview that shows the upcoming calendar week.  I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.</p>
  
  <p>I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%.  I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.</p>
  
  <p>Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..</p>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.cal_scroller {
      padding: 0;
      overflow: auto;
      width: 100%;
  }
  
  .cal_container {
      width: 935px;
  }
  
  .day {
      border: 1px solid #999;
      width: 175px;
      height: 200px;
      margin: 10px;
      float: left;
  }
  </code></pre>
  
  <p>and the (simplified) structure:</p>
  
  <pre><code>&lt;div class="cal_scroller"&gt;
      &lt;div class="cal_container"&gt;
          &lt;div class="day"&gt;Monday&lt;/div&gt;
          &lt;div class="day"&gt;Tuesday&lt;/div&gt;
          &lt;div class="day"&gt;Wednesday&lt;/div&gt;
          &lt;div class="day"&gt;Thursday&lt;/div&gt;
          &lt;div class="day"&gt;Friday&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So to try again - I'd like the <code>cal_scroller</code> div always be the page width, but if the browser is resized so that the <code>cal_container</code> doesn't fit anymore I want it to scroll WITHIN the container.  I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for.  I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.</p>