Align div/span to top left of table cell

Question

I have a table that represents a calendar month. That is, each row is a week, and each cell is a day. I'd like to display the date number in the top left of each cell, like it is on most calendars (eg, here ), while still allowing other content, of an arbitrary number of words/lines, to be in the cell, but I can't get it to align. Any ideas on some CSS (or changes to the HTML structure, if needed) that can make this work? Here's some example code .

Thanks!

Answer 1

You can easily do this by setting the parent element (the td ) with a position:relative which causes the child elements to be absolutely positioned relative to the element in question , because any absolutely positioned element is positioned according to it's closest positioned - absolute, relative, or fixed - parent . As correctly noted by Gaby aka G. Petrioli the spec I linked to does not define behavior of how table-cells should funciton when set to position:relative however all browser implementations do consistently implement this none the less and in a case like this I believe it appropriate to use this property.

So all you need in the end is have .day be position:relative and .date_num_container be set to position:absolute; top:0px; left:0px; position:absolute; top:0px; left:0px; and it starts working as you can see here: http://cssdesk.com/ERpLC

Answer 2

try this

td.day {position: relative;}
.date_num_container {position:absolute; top:0; left:0;}

Answer 3

No need for absolute positioning

td.day
{
    height:15%;
    width:14%;
    background:#ccc;
    padding:0;
    vertical-align:top;
}

div.date_num_container{
  text-align:center;
}

Demo at http://cssdesk.com/WMFrA

Answer 4

I don't see the need for absolute positionning in your case. You can take it simple:

div.date_num_container {
height:100%;
//remove absolute positionning
}

.other_stuff {
margin-top:25px;
text-align:center
}