Need help with css layering

HTML & CSS
1

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;
    }
2

ok, thanks! This is working great now!

You wouldn’t happen to have any insight on there would you?

3

resizing seems to have no affect on the positioning.

4

Will the absolute positioning affect the layout when the page is resized, or the tesxt is resized by some browsers?

5

I made some changes to the style, it works for me on FF, IE 7/8, chrome.


        #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: 5px;  <!-- adjusted the margin-->
		background: #f2f2f2;
		padding-top: 1px;
		color: #7777777;
		position: absolute; <!-- from relative to absolute-->
		z-index: 2;
	}