Avoid height adjustment of column in table

If somebody can provide a functioning, concrete solution using either tables or CSS or both, the points are his/hers. I need a solution which works for
- variable window width; body contents width must adapt, menu width must remain constant
- variable amount of body data; header height must remain constant under ALL circumstances
- with 99.5% of the browsers, including IE, FF, NS and opera
- and should avoid using JS to cover up browser bugs.

I don't care whether it's CSS or tables. However, tables are preferred because some of the body contents comes with a two-column format which I failed to make display correctly under the given conditions. IE especially appears not to be able to handle "div width=50%" in a child div correctly.

Please post tested code. I'm ready to spend another 500 points or more.

If tables do the trick, then use them. They're much better support than DIV's with CSS2 anyway.

You could try not doing any line breaks inbetween your <td> and </td> tags, for example:

Do this: <td>Content goes here</td>

Don't do this: <td>
Content goes here
</td>

I've noticed I get some layout errors doing that.

I would forget using rowspan=2 to present a side menu, as you are doing here, and instead use a table-within-a-td to achieve the same thing.

Specifically, you would have a main table of 1 row with 2 cells. Within the second cell of this you would have another table of 2 rows with 1 cell each. You would set the height and width of this second table to 100%. Also, add valign=top to each of the cells of the main table.

Here is the exact HTML you could use (the CSS would not change):



<table width="100%" height="100%" cellpadding="0" cellspacing="0" class="maintable">
   <tr>
      <td class="navcol" valign=top>
         <a href="../index.php"><img src="../_images/logoani.gif" width="162" height="114" border="0" /></a>
         <?php echo $omenu->make_menu_text($selmnu, $mnuconfig, TRUE, array(TRUE, TRUE)); ?>
      </td>
      <td valign=top>

<table width=100% height=100% cellpadding=0 cellspacing=0>
   <tr>
      <td class="toprow">
         <img src="../_images/headtopright.gif" width="324" height="40" align="right" style="float:right "/>
         <?php sometext(); ?>
      </td>
   </tr>
   <tr>
      <td class="bodycol">
         <img src="../_images/startbild.jpg" width="580" height="329" border="0" />
      </td>
   </tr>
</table>

leende - thank you - I'm going to try that. Let me just finish what I'm looking at right now.

I'm currently AGAIN trying to get it going with CSS - and it drives me nuts. Most of the stuff works fine but IE creates some gaps between DIVs which I just can't get rid of. And I hate to think how this thing will look on older browsers... I've not yet tried.

<flame>
I don't know why most people become so religious when talking about CSS. Sure - it's a nice idea but it just DOES NOT WORK. When we need browser-specific hacks for CSS or JS to overcome browser implementation differences we're not better off than with tables. With tables, I don't need JS and browser-specific code to have the page look good on most browsers.
</flame>