CODEWITHSUNDEEP
htmlcsscss-positionhtml-tablevertical-alignment
sundance
sundance

Reputation: 2945

Align div/span to top left of table cell

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 (e.g., 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!

Upvotes: 3

Views: 3846

Answers (4)

David Mulder
David Mulder

Reputation: 26985

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; and it starts working as you can see here: http://cssdesk.com/ERpLC

Upvotes: 5

Marion LP
Marion LP

Reputation: 142

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
}

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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

Upvotes: 1

Pete
Pete

Reputation: 58412

try this

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

Upvotes: 1

Related Questions