Welcome to WebmasterWorld Guest from 54.226.25.231

Forum Moderators: not2easy

Message Too Old, No Replies

TABLE of width 100% to fill a DIV

I cannot produce one.

     

vegoo

7:31 pm on Apr 22, 2003 (gmt 0)

10+ Year Member



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

8:28 pm on Apr 22, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

8:43 pm on Apr 22, 2003 (gmt 0)

10+ Year Member



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

8:44 pm on Apr 22, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Which Netscape version?

vegoo

8:48 pm on Apr 22, 2003 (gmt 0)

10+ Year Member



Netscape 7.0

DrDoc

9:06 pm on Apr 22, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month