Question

I have a page with a table, and I want its layout to look like this:

+------------+--------------+----------------------------------+
| 200px wide |  300px wide  |         Remaining width          |
|  2 rows    |    1 row     |              1 row               |
|Page height |              | Height of image scaled to width  |
|            +--------------+----------------------------------+
|            |                 Remaining width                 |
|            |                 Remaining height                |
|            |                 1 row, 2 columns                |
+------------+-------------------------------------------------+

I seem to be able to get everything working except limiting the height of the table to the page height. How do I make the table height equal to the page height?

Here is a sample page.

I could do this in two minutes with jQuery, but I really don’t want to have to use Javascript do something this simple.

EDIT: Only tested in Firefox. It may or may not work in other browsers.

Answer 1

Like this?

<table width="100%" height ="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200px" rowspan="2">&nbsp;</td>
    <td width="300px">&nbsp;</td>
    <td width="44%">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>