Q:

How to create a horizontal calendar with nested lists? 

I want to create a date chooser like this:
| 1 2 3 4 5 6 7 8 9 .. 29 30 31 | 1 2 3 4 ..
| January                       | February

I think the best structure for this would be:   
 <div class="outer">
   <ol>
     <li class="month">
     January
       <ol>
         <li class="day">1</li>
         <li class="day">2</li>
         <li class="day">3</li>
         ...
        </ol>
      </li>
      <li class="month">
        February
        <ol>
          <li class="day">1</li>
          <li class="day">2</li>
          <li class="day">3</li>
          ...
        </ol>
      </li>
    </ol>
 </div>

Now I would like the outer divs (.month) to expand to the inner divs (.day), which are all of the same width.  And then have that in a big horizontal div (.outer) 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. 
I obviously cannot set a fixed with for the months because they dont have the same amount of days. 
I set up a Fiddle here  with some css, but it doesn't work and I dont know how to go about it. 

A:

These kind of questions are just fun to answer step-by-step. 
The basics of the solution is to display all list items as inline-block:
.calendar > ol > li {
    display: inline-block;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
}

Give the dates a fixed size, put all months on a single line, and let the container scroll:
.calendar {
    overflow-x: auto;
}
.calendar > ol {
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.calendar > ol > li {
    display: inline-block;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
    width: 30px;
}

And finally, shuffle the months' and the dates' positions, resulting in this snippit:

.calendar {
    overflow-x: auto;
    overflow-y: hidden;
}
.calendar > ol {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    margin-bottom: -1em;
}
.calendar > ol > li {
    display: inline-block;
    margin-top: 1em;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
    width: 30px;
    position: relative;
    top: -2.2em;
}
<div class="calendar">
    <ol>
        <li>January
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </li>
        <li>February
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ol>
        </li>
        <li>March
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </li>
        <li>April
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </li>
    </ol>
</div>

Note that this is a strict CSS2 solution compatible with even the oldest browser, does not use absolute positioning so it has no consequence for the content around it, requires just a single style class, is compatible with every font size, and has no impact on the markup at all.