margins on 100% table off within div

any ideas why?

[Craig_F]

what I want to do is have a div of 610px that has everything within it indented by 5px on both sides *except* the headings. no matter what I try when the table is set to 100% it screws up the layout, but I can't really remove the 100% either since I need the table set to 100%. here's what I have:

<div style="border: solid 1px; width: 610px">

<table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000" style="margin: 5px">
<tr>
<td>Table</td>
</tr>
</table>

<hr width="100%" style="margin: 5px" />

<h1 style="background-color: #999;">This is an H1</h1>

</div>

any ideas what's wrong?

[drbrain]

How about using padding instead of margins?

<div style="border:solid 1px;padding:0 5px;width:600px">
<table style="width:100%;background:red">
<tr><td>Table
</table>
<hr>
<h1 style="background:#999;">This is an H1</h1>
</div>

Note that width is 600px instead of 610px, because the width of a box is:

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

[Craig_F]

I tried that, but it causes the heading to align with everything. What I want is for the headings to stick out an extra 5px beyond everything on either side.

[Birdman]

Try wrapping the table in another div, and set that div to 600px wide with margin-left 5px.

<div style="border: solid 1px; width: 610px">
<div style="width: 600px; margin-left: 5px;">
<table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#FF0000" style="margin: 5px">
<tr>
<td>Table</td>
</tr>
</table>
</div>
<hr width="100%" style="margin: 5px" />

<h1 style="background-color: #999;">This is an H1</h1>

</div>

[drbrain]

or just use a negative margin on the h1:

h1 { margin: 0 -5px }