TABLE of width 100% to fill a DIV

I cannot produce one.

[vegoo]

Hello, please could you help me, I am having a problem.

I have a web page layout which has in the middle a DIV with the following details:

.content
{
color: #4179a8;
line-height: 1.4em;
margin: 5px 145px 5px 145px;
min-width: 90px;
padding: 5px 5px 5px 5px;
border: 1px solid #000000;
border-top: 1px solid #000000;
background-color: #eeeeff;
position: relative;
width: auto;
z-index: 3;
}

In the <div class="content"></div> tags, I want to place a table that will fill the width of the DIV.

In the HTML:

<table class='fitted'>
<tr>
<td>
Hello
</td>
</tr>
</table>

In the CSS:

table.fitted
{
width:100%;
}

When I try this, the table that is within the DIV expands to fill 100% of the screen width, I do not want this, I want the table to fill only the width of the DIV (which is always the width of the browser window minus a certain number of pixels. As people use their browsers at different widths, I need a way to force the table to only occupy the width of the DIV.

I hope you can help, many thanks.

[DrDoc]

Welcome to Webmaster World! :)

The problem is this code in the .content rule:

width: auto;

If you explicitly set the width to less, say 99% I believe it should work.

Also, have you considered dropping the table completely? Well, unless it serves a particular function, such as displaying tabular data.

[vegoo]

Thanks for the reply. That solves the problem in IE, but not Netscape where the table still spreads the width of the browser.

I do need to include tables, yes.

[DrDoc]

Which Netscape version?

[vegoo]

Netscape 7.0

[DrDoc]

margin: 5px 145px 5px 145px;
padding: 5px 5px 5px 5px;
width: 99%;

Technically, this means that the width is 99% + 145 + 5 + 5 + 145 pixels.

Try to set the width (99%) to an outer div, then place another div inside that one (to which you apply padding and margin, but no width). Finally, the table resides inside that div.