Having some difficulties with my calendar app as I am unable to position the date square to the top right. I have tried using float:right and align-text: right but it has not worked. Here's a jsfiddle link along with the code:
Styling (CSS)
table.calendar {
table-layout: fixed;
width: 520px;
}
span.day-number {
vertical-align:top;
background:#999;
z-index:2;
top:0px;
align-right:+70px;
padding:4px;
color:#fff;
font-weight:bold;
width:18px;
text-align:center;
}
td.calendar-day, td.calendar-day-np {
vertical-align:top;
width:70px;
padding:5px 25px 5px 5px;
border-bottom:1px solid #999;
border-right:1px solid #999;
}
div.event {
display:inline;
position:relative;
z-index:3;
top:15px;
text-width: 70px;
}
HTML Structure
<table class="calendar">
<tr>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thur</td>
<td>Fri</td>
</tr>
<tr>
<td class="calendar-day"><span class="day-number">14</span><p> </p><p> </p></td>
<td class="calendar-day"><span class="day-number">15</span><div> </div> </td>
<td class="calendar-day"><span class="day-number">16</span><div class="event">4:00PM<br>Go to gym</div></td>
<td class="calendar-day"></td>
<td class="calendar-day"><span class="day-number">18</span><p> </p><p> </p></td>
</tr></table>
I'm not very experienced in CSS so any help or suggestions would be greatly appreciated.