Laying out DIVs in a table-like manor in HTML - html

Question

I'm trying to figure out how to CSS-style my DIV's in order to make a calendar view of some data.
Here is a screenshot of what I've got so far.
I'm using a table, with tr and five TD's. Inside the TD's I've added a DIV that has display: inline-block. Somewhat like this structure:
<table>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
It looks alright as long as there is no text inside the DIV, but when I add some text the grid is skewed, as seen in the picture.
I've tried different variants of TABLE vs DIV, but I just can get it do display correctly.
Do you have any suggestions as to how I can create this calendar view?
I don't want to use a calendar-plugin, since this is a part of a more complex resource-view I'm building.

Answer 1

Use CSS to align the divs in a table-like way using text-align and vertical-align, making sure you give each div a separate id.
HTML
<div class="table" id="one"></div>
<div class="table" id="two"></div>
<div class="table" id="three"></div>
<div class="table" id="four"></div>
CSS
.table{
width: 45%;
height: 45%;
background-color: #efefef;
}
#one{
text-align: left;
vertical-align: top;
}
#two{
text-align: right;
vertical-align: top;
}
#three{
text-align: left;
vertical-align: bottom;
}
#four{
text-align: right;
vertical-align: bottom;
}
try that and tell me if it is insufficient.
if you have more than 9 divs, use pixels for the alignment