Make td's(with bg image) tile to fill space

joshdub223 · #1 (**permalink**) Apr 22nd, 2006, 17:41

Hey, im building a gaming website that needs content boxes that can extend past their normal slices in case they type too much, that was easily accomplished but heres the problem.

As you can see, the three main columns are all different heights. I need to know how to get the three very bottom rows of the tables(Each table is in one of the three columns) to tile and extend till they are touching the bottom row... any suggestions?

Code here:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

</head>

<body>
 <table name="table1" id="table1" width="970" height="100%" border="0" cellspacing=0 cellpadding=0>
  <tr valign="top">
    <td width="287" height="100%" cellspacing=0 cellpadding=0>
    <table id="Table_01" width="287" height="1001" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="column1/column1_01.jpg" width="287" height="307" alt=""></td>
    </tr>
    <tr>
        <td height="53" background="column1/column1_02.jpg">&nbsp;</td>
        <td height="53" colspan="3" valign="top" bgcolor="#1f1f1f">&nbsp;</td>
        <td height="53" background="column1/column1_04.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="column1/column1_05.jpg" width="287" height="193" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="column1/column1_06.jpg" width="130" height="16" alt=""></td>
        <td>
            <img src="column1/column1_07.jpg" width="124" height="16" alt=""></td>
        <td colspan="2">
            <img src="column1/column1_08.jpg" width="33" height="16" alt=""></td>
    </tr>
    <tr>
        <td height="47" colspan="2" background="column1/column1_09.jpg">&nbsp;</td>
        <td height="47" valign="top" bgcolor="#1f1f1f"><span class="style2">blah blew blew bblee blee blah blam blank poop blah blah </span></td>
        <td height="47" colspan="2" background="column1/column1_11.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="column1/column1_12.jpg" width="130" height="17" alt=""></td>
        <td>
            <img src="column1/column1_13.jpg" width="124" height="17" alt=""></td>
        <td colspan="2">
            <img src="column1/column1_14.jpg" width="33" height="17" alt=""></td>
    </tr>
    <tr>
        <td height="49" colspan="2" background="column1/column1_15.jpg">&nbsp;</td>
        <td height="49" valign="top" bgcolor="#1f1f1f"><p class="style2">not so much in</p>          </td>
        <td height="49" colspan="2" background="column1/column1_17.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="column1/column1_18.jpg" width="130" height="16" alt=""></td>
        <td>
            <img src="column1/column1_19.jpg" width="124" height="16" alt=""></td>
        <td colspan="2">
            <img src="column1/column1_20.jpg" width="33" height="16" alt=""></td>
    </tr>
    <tr>
        <td height="49" colspan="2" background="column1/column1_21.jpg">&nbsp;</td>
        <td height="49" bgcolor="#1f1f1f"><span class="style2">this is a wee bit longer bust still it only extended 1 r</span>ow </td>
        <td height="49" colspan="2" background="column1/column1_23.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="column1/column1_24.jpg" width="287" height="253" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="column1/spacer.gif" width="104" height="1" alt=""></td>
        <td>
            <img src="column1/spacer.gif" width="26" height="1" alt=""></td>
        <td>
            <img src="column1/spacer.gif" width="124" height="1" alt=""></td>
        <td>
            <img src="column1/spacer.gif" width="26" height="1" alt=""></td>
        <td>
            <img src="column1/spacer.gif" width="7" height="1" alt=""></td>
    </tr>
</table>
    </td>
    <td width="430" height="100%" cellspacing = 0 cellpadding = 0 marginwidth=0><table id="Table_03" width="430" height="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="485" colspan="3">
            <img src="column3/column3_01.jpg" width="430" height="485" alt=""></td>
    </tr>
    <tr>
        <td width="22" height="470" background="column3/column3_02.jpg">&nbsp;</td>
        <td width="382" height="470" valign="top" bgcolor="#1f1f1f"> <div align="center"><span class="style1">kjkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj  jkjkjkjkjkj </span>jkjkjkjkjkj    </div></td>
        <td width="26" height="470" background="column3/column3_04.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="column3/column3_05.jpg" width="430" height="4" alt=""></td>
    </tr>
    <tr>
        <td height="100%" colspan="3" background="column3/column3_06.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
</table>
    
    </td>
    <td width="437" height="100%" cellspacing=0 cellpadding=0>
    <table id="Table_02" width="253" height="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="column2/column2_01.jpg" width="253" height="640" alt=""></td>
    </tr>
    <tr>
        <td width="7" height="64">&nbsp;</td>
        <td width="176" height="64" align="center" valign="top" bgcolor="#1f1f1f"><p><strong><span class="style1">Is Justin Really Gay?</span></strong></p>
        <p><strong><span class="style1">YES</span></strong></p>
        <p class="style3">DUH </p>
        <p class="style3">DUH</p>
        <p class="style3">DUH</p>
        <p class="style3">DERRRRRRRRRRR </p>
        <p>&nbsp;</p></td>
        <td width="70" height="64" background="column2/column2_04.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="column2/column2_05.jpg" width="253" height="296" alt=""></td>
    </tr>
</table>
    
    </td> 
  </tr>

    
    

  <tr>
  <td colspan=3>

<img src="bottom.jpg" width=970  />
  </td>
  </tr>
  
  
</table>
</body>
</html>

sypher · #2 (**permalink**) Apr 22nd, 2006, 22:10

You would have one table behind all these. so they dont need individual background images and use one long background image to fit the whole table.

Meaning the table infront would only be used to type in data.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to make image fixed within DIV	swaino	Web Page Design	4	Jun 6th, 2008 20:20
Problems with Footer - IE6 adding space below image ??	slimboyfatz32	Web Page Design	7	Feb 29th, 2008 21:03
[SOLVED] Jargon in templates to fill space	R8515198	Webforumz Cafe	5	Jan 30th, 2008 07:10
unwanted space under image in IE	Craigj1303	Web Page Design	2	Sep 5th, 2007 20:47
How to make a moving #top image?	qosmioamit	Web Page Design	6	Jan 17th, 2006 18:52

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Make td's(with bg image) tile to fill space