How to make the text remain in the upper left corner of the drive ALWAYS?

If the text in the second div / span is long enough, then the first div / span will remain in the upper corner. But if there is nothing in the second div / span, then the first div / span is in the middle of td.

I am using IE 8.

HTML snippet for calendar

<table id="calendar">
    <thead>
        <tr><th>April</th></tr>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tues</th>
            <th>Wed</th>
            <th>Thur</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>
                    <span>1</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>2</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>3</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>4</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>5</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>6</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>7</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS for the calendar

#calendar {
    border:2px solid black;
    height:100%;
    width:100%;
}

#calendar td {
    border:2px solid black;
}

#calendar td > div:first-child {
    text-align:left; 
    left: 0; 
    top: 0;
}

#calendar td > div:first-child > span{
    text-align:left; 
    left: 0; 
    top: 0;
}

#calendar td > div + div {
    clear:both;
    text-align:center;    
    font-weight:bold;
    white-space:normal;
}