homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
TABLE of width 100% to fill a DIV
I cannot produce one.
vegoo




msg:1209294
 7:31 pm on Apr 22, 2003 (gmt 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.

 

DrDoc




msg:1209295
 8:28 pm on Apr 22, 2003 (gmt 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.

vegoo




msg:1209296
 8:43 pm on Apr 22, 2003 (gmt 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.

DrDoc




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

Which Netscape version?

vegoo




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

Netscape 7.0

DrDoc




msg:1209299
 9:06 pm on Apr 22, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved