HTML Help. I can't figure out how to make a cell height stay put.

[Qacer]

Hey all,

I'm working on a class project. My site is: Here. Notice the Fun Facts box. I can't seem to get that cell height to stay put. The cell (surrounded by the purple border) always resizes according to the contents of the main table. Notice the first page. The cell height is just right. But then you go to the other pages such as Overview, Magnetism, or Electron Spin and its height increases.

How do I make this cell height stay put? I've tried various tricks such as adding a table in the bottom cell that has a 90% height. This trick used to work, but it doesn't seem to work with IE6. I've also tried adding a blank / spacer image in the bottom cell with a variable height set to 90%. It still doesn't work. I tried specifically hard coding the height to 150 px, but it still changes.

Any tips? Thanks!

 

[Kelemvor]

I'd just put a table inside that cell and then make that new table of a fixed size. and set the cell it's in to Vertical alignment Top.

 

[replicator]

Just by looking at the source. Your little Fun Facts td element, is next to another td element, which uses contains another table with all your text content. Both of these td elements are on the same row.

So even if you set the height to the first td, the td next to it will make sure it gets resized to match its height.
If you are going to use a table for layout, I would add some more rows and just span it for the main text content.

<td width="24%" height="150" valign="top" class="sideborder"><p align="center" class="boxtext"><font color="#FF0066" size="2" face="Verdana, Arial, Helvetica, sans-serif">Fun 
        Facts</font></p>
      <p></p></td>
    <td colspan="2" rowspan="2" valign="top"> 
 
      <table width="98%" border="0" align="center" cellpadding="4" cellspacing="1" class="dashedbox">

 

[replicator]

Nevermind.. I think u did try to span the row, now that I took a closer look..

Looking at the HTML again, you have a colspan of 2 for your main text content cell, but u only have two columns in every row. So add another <td> element in every row and I think it should fix it.

<td width="24%" height="150" valign="top" class="sideborder"><p align="center" class="boxtext"><font color="#FF0066" size="2" face="Verdana, Arial, Helvetica, sans-serif">Fun
Facts</font></p>
<p> </p></td>
<td colspan="2" rowspan="2" valign="top">

<table width="98%" border="0" align="center" cellpadding="4" cellspacing="1" class="dashedbox">