Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Table cell width not following css in IE

Works beautifully in FF & quirks mode, but not IE standards mode

4:57 am on Aug 3, 2010 (gmt 0)

5+ Year Member

I am using DocType Declaration 4.01 Transitional.

I have created a simple table with 2 columns. I want the left column to remain a fixed width at all times while the right column width scales with the user's browser window / monitor. This table forms the basic structure for the page as a whole, with the left column containing various static site links, navigation, etc. and the right column containing dynamic page content which changes depending on where the user browses. Thus there is no higher level element that this table is contained within. Using CSS I have set the left <TD> tag to a fixed width and this does the trick in FF. However, in IE, this is not always obeyed.

I have determined the following is happening in IE. If there is enough text within the right column such that the text has to wrap to the the next line, then the right column width is pushed as wide as it can go before the text wrap. This causes the right column width to be maximized so, the proper fixed left column width is achieved and the right column properly makes up the difference to fill the browser window width. However, if the text in the right column is short such that it does not consume the intended right column width (screen width minus left column fixed width), then the extra white space within the right column is shared with the left column (as if both are padded equally to consume the extra white space). This causes the left column to be wider than the fixed width specified with CSS. In this instance, I want the left column width to remain the width specified with CSS and leave all of the extra white space in the right column.

This problem is occurring in standards mode. I have noticed that I do not have this problem in quirks mode (in quirks mode, left column remains fixed no matter what, IE and FF). But I do not want to use quirks mode for other reasons.

How can I force the right column to fill the extra space even if there is little content within it?

I feel like this is a very basic layout and I must be missing a simple css rule to apply.

One other tid-bit that might be important. This table actually includes a one row above and one row below the particular row I discuss above. These other rows both make use of the 'colspan=2' property (specified within the HTML) so as to produce only one cell within the row. Basically, the top row contains static website header stuff, the bottom row contains static website footer stuff, and only the row in the middle includes 2 columns.

Any help is greatly appreciated.
7:23 am on Aug 3, 2010 (gmt 0)

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

Try using the <td width> attribute (and disabling equivalent css).
Try using the <col width> tag and attribute.

Assuming I wanted the left column to be 125 pixels wide I would use <td width="125">...</td><td width="100%>...</td> on the first row. However, since you are using <td colspan="2"> on the first row, you may need to use <table><col width="125"><col width="100%>... instead.

If that fails, post a simplified example of your code.

4:18 am on Aug 4, 2010 (gmt 0)

5+ Year Member

Thanks for the suggestions. I was not previously aware of the <col> tag. I tried both suggestions (disabled equivalent css) and neither method provided an improvement. When trying your suggestions, I was able to confirm that both were basically functional. In other words, I was able to change the left column width and see the width change. But still, if the right column's width is not filled with content, then in IE only, the extra space seems to get shared with the left column. Here is my simplified code. I wonder if I have some other CSS (perhaps within the sub-tables within the main table) causing some kind of elusive conflict.

The left and right columns we have been discussing have classes "leftmenustruct" and "contentareastruct" respectively

<table class="main" cellspacing="0" cellpadding="0">
<td align="center" valign="top" colspan="2">
<table class="topper" cellspacing="0" cellpadding="0">
... content within this sub-table deleted...
<td class="leftmenustruct">
...left column content deleted...
<td class="contentareastruct" valign="top">
<table class="contentarea" cellspacing="10" cellpadding="5">
... right column content within this sub-table deleted...
<td class="footer" colspan="2">
<table class="footer">
...content within this footer sub-table deleted...

Here is the CSS:

table.main {width: 85%; margin-left: auto; margin-right: auto; border-spacing: 0px 0px; padding: 0px 0px 0px 0px;}

table.topper {width: 100%; border-spacing: 0px 0px; padding: 0px 0px 0px 0px;}

td.leftmenustruct {width: 175px; text-align: center; vertical-align: top;}

td.contentareastruct {border-width: 0px; border-style: solid; vertical-align: top;} //also tried with width: 100%;

table.contentarea {width: 100%; border-spacing: 10px; padding: 5px 5px 5px 5px;}

td.footer {text-align: center; vertical-align: middle;}

table.footer {width: 100%; border-spacing: 0px 0px; padding: 0px 10px 0px 10px;}
2:03 pm on Aug 4, 2010 (gmt 0)

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

I just had a quick play, the following works for me...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Table Test 2</title>


<table width="100%" border="1">
<tr><td colspan="2">My Header</td></tr>
<tr><td width="125">Mary had </td><td>a little</td></tr>
<tr><td>lamb, </td><td>its fleece as</td></tr>
<tr><td>snow </td><td>and everywhere</td></tr>
<tr><td>that Mary </td><td>went, the lamb</td></tr>
<tr><td>was sure </td><td>to go.</td></tr>


If you start here and gradually adjust it to your requirements, it should be ok.

2:55 am on Aug 6, 2010 (gmt 0)

5+ Year Member

I still do not fully understand but have determined that somehow it was related to the embedded table with class="topper". Once that table was removed, expected functionality resumed in IE. Anything else I put in place of the table did fine. So, I replaced it with a <div> arrangement and all works well. Must have been some kind of funny CSS conflict with IE.

Thanks for your help.

Featured Threads

Hot Threads This Week

Hot Threads This Month