#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    23
    Rep Power
    0

    HTML/CSS Table Positioning Problem


    Hi,

    Have a problem with a left-hand table, the content of which is dragged down the page when the right-hand table grows in the same direction, say when filling it with content. I need to anchor that left-hand table in place but allow the right-hand table to stretch vertically.

    Have tried absolute CSS positioning, spacers, extra tables, 100% height - nothing seems to work.

    I've simplified the HTML code for readability, but the general layout is pretty much intact:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <table width="668" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td height="49" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="667" height="49">&nbsp;</td>
    </tr>
    </table></td>
    <td width="1"></td>
    </tr>
    <tr>
    <td width="147" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="147" height="147">&nbsp;</td>
    </tr>
    </table></td>
    <td width="520" height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="520" height="32">&nbsp;</td>
    </tr>
    </table></td>
    <td></td>
    </tr>
    <tr>
    <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="520" height="24">&nbsp;</td>
    </tr>
    </table></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="517" height="419" valign="top"><div align="center">RIGHT-HAND TABLE </div></td>
    </tr>
    </table></td>
    <td height="91"></td>
    </tr>
    <tr>
    <td height="328" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="146" height="328" valign="top"><div align="center">LEFT-HAND TABLE </div></td>
    </tr>
    </table></td>
    <td></td>
    </tr>
    <tr>
    <td height="482">&nbsp;</td>
    <td>&nbsp;</td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>



    Thanks,

    Dyb
  2. #2
  3. No Profile Picture
    *foo = *bar;
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Wheaton, IL
    Posts
    179
    Rep Power
    44
    So, where's the CSS? And why are you using tables? If you're using CSS you really don't need to.

IMN logo majestic logo threadwatch logo seochat tools logo