title: How to create a horizontal calendar with nested lists?
body: <p>I want to create a date chooser like this:</p>
  
  <pre><code>| 1 2 3 4 5 6 7 8 9 .. 29 30 31 | 1 2 3 4 ..
  | January                       | February
  </code></pre>
  
  <p>I think the best structure for this would be:   </p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div class="outer"&gt;
     &lt;ol&gt;
       &lt;li class="month"&gt;
       January
         &lt;ol&gt;
           &lt;li class="day"&gt;1&lt;/li&gt;
           &lt;li class="day"&gt;2&lt;/li&gt;
           &lt;li class="day"&gt;3&lt;/li&gt;
           ...
          &lt;/ol&gt;
        &lt;/li&gt;
        &lt;li class="month"&gt;
          February
          &lt;ol&gt;
            &lt;li class="day"&gt;1&lt;/li&gt;
            &lt;li class="day"&gt;2&lt;/li&gt;
            &lt;li class="day"&gt;3&lt;/li&gt;
            ...
          &lt;/ol&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Now I would like the outer divs (<code>.month</code>) to expand to the inner divs (<code>.day</code>), which are all of the same width. And then have that in a big horizontal div (<code>.outer</code>) so I can scroll the innards.
  I already got this to work with only one month, but when I add more months to it, it doesn't work anymore.</p>
  
  <p>I obviously cannot set a fixed with for the months because they dont have the same amount of days.</p>
  
  <p>I set up <a href="http://jsfiddle.net/g6u52vhn/1/" rel="nofollow">a Fiddle here </a> with some css, but it doesn't work and I dont know how to go about it.</p>