Welcome to WebmasterWorld Guest from 54.158.86.243

Forum Moderators: not2easy

Message Too Old, No Replies

TABLE of width 100% to fill a DIV

I cannot produce one.

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

New User

10+ Year Member

joined:Apr 22, 2003
posts:3
votes: 0


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.

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


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.

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

New User

10+ Year Member

joined:Apr 22, 2003
posts:3
votes: 0


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.

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


Which Netscape version?
8:48 pm on Apr 22, 2003 (gmt 0)

New User

10+ Year Member

joined:Apr 22, 2003
posts:3
votes: 0


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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members