How do I get text to stay in the upper-left corner of a td ALWAYS?

If the text in the second div/span is long enough then the first div/span stays in the upper corner. But if there's nothing in the second div/span, then the first div/span sits in the middle of the 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 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; } ```