I would like to create a full-page calendar using html that behaves as you might think it would. It does its best to display the whole month in one screen. Any text that doesn't 
fit into the table cell causes a little scrollbar to appear for that day.

The code I have so far behaves itself pretty well in Chrome except that the day numbers tend to get squashed into the previous week. 

![chrome rendering of the calendar](https://i.stack.imgur.com/GVwoa.jpg)

In Firefox it ignores the overflow setting of the table cells, so the table cells lose their scrollbars. 

![firefox rendering of the same calendar](https://i.stack.imgur.com/C8i14.jpg)

(not concerning myself with IE)

My question is: How can I get the numbers to behave themselves. If Firefox could render the same way too, that would be a bonus.

Here's the CSS:

```
/* for looking at the outlines of things */
 * {
    border:1px dashed #0000FF;
}
.scrollable_table {
    width: 100%;
    height: 100%;
    /*overflow: auto;*/
}
.calendar_num {
    position:relative;
    display: inline-block;
    float:right;
    margin-top:1px;
}
.calendar_row {
    width:100%;
}
.calendar_td {
    width:14%;
    /*height:14%; */
}
.scrollable_td {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

```

Here's some example code for a 'typical' month:

```
<html><head>
  <link type='text/css' rel='stylesheet' href='/static/calendar.css' />
  <body>
    <table class=scrollable_table>
      <tr class=calendar_row>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td>
          <div class=calendar_num>1</div>
          <div class=scrollable_td>day: 1
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>2</div>
          <div class=scrollable_td>day: 2
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>3</div>
          <div class=scrollable_td>day: 3
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>4</div>
          <div class=scrollable_td>day: 4
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>5</div>
          <div class=scrollable_td>day: 5
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>6</div>
          <div class=scrollable_td>day: 6
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>7</div>
          <div class=scrollable_td>day: 7
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>8</div>
          <div class=scrollable_td>day: 8
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>

      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>9</div>
          <div class=scrollable_td>day: 9
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>10</div>
          <div class=scrollable_td>day: 10
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>11</div>
          <div class=scrollable_td>day: 11
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>12</div>
          <div class=scrollable_td>day: 12
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>13</div>
          <div class=scrollable_td>day: 13
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>14</div>
          <div class=scrollable_td>day: 14
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>15</div>
          <div class=scrollable_td>day: 15
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>16</div>
          <div class=scrollable_td>day: 16
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>17</div>
          <div class=scrollable_td>day: 17
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>18</div>
          <div class=scrollable_td>day: 18
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>19</div>
          <div class=scrollable_td>day: 19
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>20</div>
          <div class=scrollable_td>day: 20
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>21</div>
          <div class=scrollable_td>day: 21
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>22</div>
          <div class=scrollable_td>day: 22
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>23</div>
          <div class=scrollable_td>day: 23
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>24</div>
          <div class=scrollable_td>day: 24
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>25</div>
          <div class=scrollable_td>day: 25
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>26</div>
          <div class=scrollable_td>day: 26
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>27</div>
          <div class=scrollable_td>day: 27
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>28</div>
          <div class=scrollable_td>day: 28
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>29</div>
          <div class=scrollable_td>day: 29
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
      </tr>
      <tr class=calendar_row>
        <td class=calendar_td>
          <div class=calendar_num>30</div>
          <div class=scrollable_td>day: 30
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td>
          <div class=calendar_num>31</div>
          <div class=scrollable_td>day: 31
            <br/>a bunch of text that could flow off the end of the td. a bunch of text that could flow off the end of the td. a bunch of text that could flow o
        </td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
        <td class=calendar_td></td>
      </tr>
    </table>
  </body>
</html>

```

And here is a fiddle [calendar fiddle](http://jsfiddle.net/slashdottir/xqJAC/)