PDA

Click to See Complete Forum and Search --> : stretching tables

skullface
10-25-2005, 07:21 AM
I am having a problem with a pretty complicated table and its driving me crazy!!
Please visit: http://www.luke-warm.co.uk/diary/final2.html to see what i am talking about, its quite hard to explain so bear with me...
I want the main pink box to stretch depending on how much text is in it but without the menus on the left and the ads on the right streching too. (i want them to stay towards the top of the screen. I made a few extra boxes (the row with the xx on the right) and made their height 100%. But they stay the same size and the other boxes all stretch out!!!
Please help!!
Thanks
David Harrison
10-25-2005, 07:29 AM
pretty complicated tableThere's you're problem right there.

Take a loot at the attached layout and see how simple the markup is compared to your table. CSS makes it much easier to create layouts.
The Little Guy
10-25-2005, 07:32 AM
I think that this may work, don't save this over the old one, but as a different file, but in the same folder.

One thing that I did was move put valign="top" in all of the <TD> elements except for the pink one, but if I missed one, you can put it in there with that code.

Tell Me If this works or not:

<html>
<head>
<title>final2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (final2.psd) -->
<table id="Table_01" width="760" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" bgcolor="#677FA7">
<img src="images/title_bar.gif" width="490" height="70" alt=""></td>
<td colspan="2" bgcolor="#677FA7">
<img src="images/login.gif" width="140" height="70" alt=""></td>
<td width="10" height="70">
<img src="images/spacer.gif" width="10" height="70" alt=""></td>
<td width="120" height="70"><img src="images/ad_top_right.jpg" width="120" height="70"></td>
<td>
<img src="images/spacer.gif" width="1" height="70" alt=""></td>
</tr>
<tr>
<td width="490" height="10" colspan="5">
<img src="images/spacer.gif" width="490" height="10" alt=""></td>
<td width="140" height="10" colspan="2"><font face="arial" color="#000000" size="1">Monday, 24 October 2005</td>
<td width="10" height="10">
<img src="images/spacer.gif" width="10" height="10" alt=""></td>
<td width="120" height="10">
<img src="images/spacer.gif" width="120" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="2" valign="top" bgcolor="#677FA7">
<img src="images/menu_top.gif" width="130" height="10" alt=""></td>
<td width="10" height="490" rowspan="8" valign="top">
<img src="images/spacer.gif" width="10" height="490" alt=""></td>
<td rowspan="2" bgcolor="#6F0A28">
<img src="images/main_top_left.gif" width="10" height="30" alt=""></td>
<td width="470" height="30" colspan="2" rowspan="2" bgcolor="#6F0A28">title</td>
<td rowspan="2" bgcolor="#6F0A28">
<img src="images/main_top_right.gif" width="10" height="30" alt=""></td>
<td width="10" height="490" rowspan="8" valign="top">
<img src="images/spacer.gif" width="10" height="490" alt=""></td>
<td width="120" height="240" rowspan="3"><img src="images/ad_right.jpg" width="120" height="240"></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td width="10" height="270" rowspan="4" bgcolor="#677FA7">
<img src="images/spacer.gif" width="10" height="270" alt=""></td>
<td width="120" height="270" rowspan="4" bgcolor="#677FA7"><font face="arial" color="#ffffff" size="2">

search Directory<br>
view Diary dates<br>
<br>
subscribe to Diary<br>
buy mailing lists<br>
<br>
job lot<br>
editorial<br>
<br>
submit a date<br>
submit a listing<br>
update a listing<br>
<br>
about Diary<br>
request info pack<br>
advertisersí info<br>
Diary contacts<br></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td width="10" rowspan="6" bgcolor="#C7A3A1">
<img src="images/spacer.gif" width="10" alt=""></td>
<td width="470" colspan="3" rowspan="7" bgcolor="#C7A3A1">

<p><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
adf</p>
<p>df</p>
<p>sdf</p>
<p>adf</p>
<p>&nbsp;</p>
<p>sdf<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p>ad</p>
<p>f</p>
<p>sdf</p>
<p>sf</p>
<p>&nbsp;</p>
<p>sf</p>
<p>sf</p>
<p>&nbsp;</p>
<p>sf</p>
<p>sf</p>
<p><br>
<br>
<br>
<br>
<br>
<br>
<br>

</p></td>
<td width="10" rowspan="6" bgcolor="#C7A3A1">
<img src="images/spacer.gif" width="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="210" alt=""></td>
</tr>
<tr>
<td width="120" height="10">
<img src="images/spacer.gif" width="120" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td width="120" height="240" rowspan="4" valign="top"><img src="images/ad_right.jpg" width="120" height="240"></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#677FA7">
<img src="images/coco_ani.gif" width="130" height="120" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="120" alt=""></td>
</tr>
<tr>
<td width="130" height="80" colspan="2" bgcolor="#677FA7"><font face="arial" color="#ffffff" size="1">
<center>
19 Cato Street,<br>
London W1H 5HR, UK<br>
T: +44 (0)20-7724 7770<br>
F: +44 (0)20-7724 7357<br>
e: <a href="mailto:info@diaryd.com">info@diaryd.com</a></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#677FA7">
<img src="images/menu_bottom.gif" width="130" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td width="140" height="100%" colspan="3" valign="top"><img src="images/spacer.gif"></td>
<td width="10" height="100%" bgcolor="#C7A3A1" valign="bottom"><image src="images/main_bottom_left.gif"></td>
<td width="10" height="100%" bgcolor="#C7A3A1" valign="bottom"><image src="images/main_bottom_right.gif"></td>
<td width="130" height="100%" colspan="2" valign="top"><img src="images/spacer.gif"></td>
<td height="100%" valign="top"><img src="images/spacer.gif" alt="xx"></td>
</tr>
<tr>
<td width="760" height="30" colspan="9"><font face="arial" color="#000000" size="1"> <center>© 2005 Diary<br>
Website design by Lukewarm & X-RM Ltd</td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="120" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="340" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="120" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
skullface
10-25-2005, 08:29 AM
Thanks for that guys but i don't know css and the valign's dont work, the stupid thing is, when i dont fill the middle pink box with text (line breaks) and simply make the overall table height to 100% it works! But as soon as i fill it with text they stop streching!?!?