joined:Feb 21, 2008
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.