Need help with css layering

[CarlMartin10]

I am trying to layer some divs but it is not going well.

If you look here ( http://iwearyourshirt.com/calendar/2010-09 ), you can see the div containing the date is on top of the one containing the image. I want the same effect on my page. Also, the image is not in the div it should be in....as you can see, it is a bit above it. Can you help me out?

My Page: http://billboardfamily.com/calendar/


HTML

<tr>
        <td></td>
        <td></td>
    <td></td>
        <td></td>
    <td></td>
        <td><div id="date-display">1</div><div id="price"><img src="http://billboardfamily.com/wp-

content/themes/mensa/assets/images/calendar_test.png"</img><div></td>
    <td><div id="date-display">2</div></td>
        </tr>

CSS

#calendar .calendar-table {
        margin-top: 5px;
        float: left;
        clear: both;        
    }
    #calendar .calendar-table td {
        color: #999999;        
    }
    #calendar .calendar-table td {
        width: 130px;
        height: 130px;
        border: #999999 1px solid;
    }
    #calendar .calendar-table th {
        color: #777777;
    }
    #date-display {
        border: #777777 1px solid;
        font-weight: bold;
        font-size: 0.9em;
        width: 16px;
        height: 17px;
        text-align: center;
        margin-left: 5px;
        margin-top: -60px;
        background: #f2f2f2;
        padding-top: 1px;
        color: #7777777;
        position: relative;
        z-index: 2;
    }
    #price {
        width: 130px;
        height: 130px;
        position: relative;
        z-index: 1;
    }

[prestashopic]

I looked your site but I think you solve your problem. If you do not solve your problem, send an image preview where you want to change