HTML Forum

**Sammu89** · 11-13-2009, 06:18 PM

Hi guys! I have this problem on my website's layout, and it's basically preventing me from continuing it, it's destroying everything.
Here goes the HTLM code:

Quote:

<table cellpadding="0" cellspacing="0" width="446" height="362">

<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>
<tr>
<td valign="top" height="95">I want this cell to have a fixed height</td>
<td valign="top" rowspan="3" width="305">
<p align="center">Text goes here - if the text is too long, I want the
stretching cell to vary in height, not the other 2.</td>
</tr>
<tr>
<td valign="top" height="68">I want this cell to have a fixed height</td>
</tr>
<tr>
<td height="89" width="141" valign="top">Stretching/Flexible cell - I
want this one to vary in height if the text on the right cell is too
long</td>
</tr>
</table>

As you can see, if I write a text that is larger than the "Text Cell" height, all the cells in the right column stretch, and I only want the last one to do so. Can you help me?
Thanks in advance

**chrishirst** · 11-13-2009, 06:19 PM

That's what tables do, and one reason they should not be used for layouts.

**Sammu89** · 11-13-2009, 06:40 PM

Yep, but since I don't know how to make one without tables, I'm stuck here and responses like yours are reaaaally helpfull ^^

**marketingman100** · 11-13-2009, 08:22 PM

Sammu89,

Give me a minute to load your code and correct it.
I am a table expert and according to most here a dinosaur.

If it can be made to work, I will do it.

**Sammu89** · 11-13-2009, 08:33 PM

Quote:

Originally Posted by marketingman100

Sammu89,

Give me a minute to load your code and correct it.
I am a table expert and according to most here a dinosaur.

If it can be made to work, I will do it.

Wow, thank you!

I tried for the last few hours to built this with divs, but i'm going nowhere. I have lots of rowspans ans colspans, and I can't put them in CSS.
Actually the design is WAY more complicated that the simple table I posted here:

Quote:

<table cellpadding="0" cellspacing="0" width="750" height="871">

<tr>
<td valign="top">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td height="154"></td>
</tr>
<tr>
<td valign="top">Banner</td>
<td height="24"></td>
</tr>
<tr>
<td valign="top" rowspan="3">Fixed Menu Cell</td>
<td height="122"></td>
</tr>
<tr>
<td valign="top" colspan="3">
Banner</td>
<td height="29"></td>
</tr>
<tr>
<td valign="top" rowspan="6" colspan="2"><p> </p>
<p>CONTAINER AREA, Text goes Here</p>
</td>
<td valign="top" fundo_direitoOO rowspan="6">
 </td>
<td height="102"></td>
</tr>
<tr>
<td valign="top" menuv_fundo2OO>
Fixed Menu Cell</td>
<td height="37"></td>
</tr>
<tr>
<td valign="top" menuv_fundo3OO>
Fixed Menu Cell</td>
<td height="44"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="178"></td>
</tr>
<tr>
<td valign="top" menuv_destaqueOO>
Fixed Menu Cell</td>
<td height="109"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the
Container Area</td>
<td height="33"></td>
</tr>
<tr>
<td valign="top" rodapeOO colspan="4">
<p align="center">Bottom</td>
<td height="38"></td>
</tr>
<tr>
<td width="252"></td>
<td width="410"></td>
<td width="56"></td>
<td width="30"></td>
<td height="1" width="2"></td>
</tr>
</table>

But all of this code can be exemplified as the example I gave above, I guess

I'm trying to convert this mess to DIV, but I don't think I'm going to make it ^^''
It seems such a simple problem, but I can't see a simple solution...

**marketingman100** · 11-13-2009, 09:21 PM

Here you go.....................

<table cellpadding="0" cellspacing="0" width="363" >

<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>

<tr valign=top><td width="141">
<Table>
<tr><td width="141" height="95" heigth="95">fixed </td>
</tr>
<tr><td height="68">fixed </td></tr>
<tr><td>flexible </td></tr>
</table>

</td><td width="305" rowspan=3><table width="305"><tr valign=top>
<td><p>Large flexible text intended to get larger by flowing throught the space
provided by the text next to it, and with any luck it will do exactly what
you want it to do.
</p>
<p>Here's the crucial point where we enter the second box to the left and
continue the text to the bottom edge of the table form.</p>
<p>Low and behold the box expands just the way you want it to. And the critics
said it could not be done.</p></td>
</tr></table>

</td></tr>
</table>

Sorry it took so long.

**marketingman100** · 11-13-2009, 09:33 PM

Sammu89,

You need to learn some more about coding so you learn that two columns can work as well as three and then you could use a design like that on both my marketing and my technology page.

Marketing uses a combination of Divs and tables and technology just uses divs.

On the other hand, you can look at the layout of either of my blog pages and see how that theme master designed the three colums to work.
http://www.genealogyland.com/blog
http://www.technologymorons.com/blog

Go look and learn Grasshopper!

**Sammu89** · 11-13-2009, 09:43 PM

Problem solved!

Thanks a LOT marketingman100 I applied the same principle to the elaborated table layout and I was able to get what I wanted!
Thank you so much again