CSS Inheriting Width not working

Question

I'm currently attempting to create a browser-based Calendar which allows jobs or meetings, etc. to be overlayed on top, which will be retrieved dynamically with AJAX (or similar) and displayed to the end user.

Unfortunately, eiter my CSS is (very) rusty or this is just another oddity which I'm having difficulty getting my head around.

The basic idea is having a <div> which will be created for each meeting or job inside the correct <td> for the day/time in the calendar. However, I'm currently unable to get this div to inherit the width of the <td> so it doesn't overlap with other days.

The current CSS I'm using contains...

td {
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-bottom: solid 1px lightgray;
    border-top: solid 1px lightgray;
    **width: 12.5%;**
    height: 10px;
    font-size: 0.1em;
}

div.job { 
       position: absolute; 
       background: #C83636; 
       background: rgba(200, 54, 54, 0.7); 
       font-size: 8px; 
       color: white; 
       margin-top: 3px; 
       width: inherit; 
       height: 10px; 
}

I will then create these divs using jquery as so:
$("#1-1").html("<div class='job'>Some test text</div>");

As I understand it at the moment, this should mean that the created <div> inherits the width of the <td> it is enclosed in, and therefore fits into the cell nicely. However, this isn't happening in either Opera or Firefox when I'm testing it.
What I see

Does anyone have any idea why this is happening?

Answer 1

Change position:absolute to position:relative for div.job class