I am currently working on a monthly calendar table where each cell displays the date in the top left corner and has a "+" button in the bottom right corner for adding content to that day. Everything works fine when all cells have the same height, but it breaks down when the row heights vary due to different amounts of content.
For reference, you can view my progress on JSFiddle: http://jsfiddle.net/FLVh6/
Here is an example of the table layout:
<table>
<tr>
<td>
<div>1</div>
<div>Content goes here</div>
<div><input type="button" value="+" /></div>
</td>
<td>
<div>2</div>
<div>Content goes here</div>
<div><input type="button" value="+" /></div>
</td>
</tr>
<tr>
<td>
<div>3</div>
<div>Content goes here</div>
<div><input type="button" value="+" /></div>
</td>
<td>
<div>4</div>
<div>Content goes here. The problem surfaces when the row stretches due to excess content, causing the button alignment to shift.</div>
<div><input type="button" value="+" /></div>
</td>
</tr>
<table>
Below is the CSS code I've used so far:
table {
border-collapse:collapse;
width: 300px;
}
td {
padding: 5px;
border: 1px solid black;
width:50%;
vertical-align:top;
}
td div:first-of-type {
font-size:large;
font-weight:bold;
float:left;
}
td div:not(:first-of-type) {
clear:left;
}
td div:last-of-type {
float:right;
}