Webmaster Forum / HTML, CSS, Scripts / CSS / August 2003

I have a table wrapped in a div like this:

<div id="content"><table id="calendar">
    <tr>
        <th id="caldate"><span>Date</span></th>
        <th id="caltitle"><span>Title</span></th>
        <th id="caltime"><span>Time</span></th>
        <th id="calroom"><span>Room</span></th>
        <th id="calvenue"><span>Venue</span></th>
    </tr>
       <tr>
               <td>hgbfdds</td>
               <td>hgbfdds</td>
               <td>hgbfdds</td>
               <td>hgbfdds</td>
               <td>hgbfdds</td>
       </tr>
</table></div>

im using tables as it is tabular data, its not for layout purposes. my
div tag has these properties:

#content {
    margin-left: 12.2em;
    border: 1px solid #006699;
    margin-right: 0.2em;
    margin-top: 1em;
}

my table has these properties in the style sheet:

table {
    border: none;
    margin-left: 0.2em;
    margin-right: 0.2em;
}
#calendar {
    border: none;
    margin-left: 0.2em;
    margin-right: 0.2em;
    width: 100%;
}
#calendar tr {
    border-bottom: dashed 1px #006EAB
}
#calendar td {
    padding: 5px 3px;
}

what happens is the table is taking up 100% of the width of the
document + the 12em  margin of the div + the o.2em + 0.2em. shouldnt
the table be taking up 100% of the div width? anybody have a
solution/advice for this problem. As always any help is much
appreciated

Thanks

Andy