Question about auto expand height with table

PeterdeB
PeterdeB used Ask the Experts™
on
Hi all

I need to create a table like the attached code and image, the yellow part will contain content that can get lengthy, the 4 green blocks should remain 85px at all cost, is this possible using tables?

Reason i am asking this, is because of a site layout change, which can now contain up to 4 content blocks in the green part, but as the yellow part gets fuller, the green parts automatically expand and move down which is not what i want, they should not move and they should remain 85px as hieght each

Thanks
<html>
<head>
<style type = text/css>
.red {
	background-color: #F00;
}
.green {
	background: #0C6;
}
.yellow {
	background: #FF0;
}
-->
</style>
</head>
<body>
<table border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="215" colspan="5" valign="top" class="red">&nbsp;</td>
  </tr>
  <tr>
    <td width="20" height="85" valign="top"></td>
    <td width="630" height="85" valign="top" class="yellow">&nbsp;</td>
    <td width="20" height="85" valign="top"></td>
    <td width="253" height="85" valign="top" class="green">&nbsp;</td>
    <td width="17" height="85" valign="top"></td>
  </tr>
  <tr>
    <td width="20" height="85" valign="top"></td>
    <td width="630" height="300" rowspan="3" valign="top" class="yellow">&nbsp;</td>
    <td width="20" height="85" valign="top"></td>
    <td width="253" height="85" valign="top" class="green">&nbsp;</td>
    <td width="17" height="85" valign="top"></td>
  </tr>
  <tr>
    <td width="20" height="83" valign="top"></td>
    <td width="20" height="83" valign="top"></td>
    <td width="253" height="83" valign="top" class="green">&nbsp;</td>
    <td width="17" height="83" valign="top"></td>
  </tr>
   <tr>
    <td width="20" height="83" valign="top"></td>
    <td width="20" height="83" valign="top"></td>
    <td width="253" height="83" valign="top" class="green">&nbsp;</td>
    <td width="17" height="83" valign="top"></td>
  </tr>
</table>
</body>
</html>

Open in new window

img.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Sounds like you realize that are the best way to do this, but working within that constraint I was able to do this...

Change the yellow attributes of:
   height="300" rowspan="3"

To now read:
   height="800" rowspan="4"


And then add another row with:

   <tr>
    <td width="20" height="83" valign="top"></td>
    <td width="20" height="83" valign="top"></td>
    <td width="253" height="551" valign="top"></td>
    <td width="17" height="83" valign="top"></td>
  </tr>



The 551 is my new blank area, which is calculated by yellow height minus the 3 greens (800 - 53 - 53 - 53 = 551).



Now I realize that this example still has a "fixed" size yellow, but it is much taller w/o affecting greens like you asked.  I will play a bit more to see if I can get one that is more "dynamic" by not specifying a height for the yellow at all.
Commented:
Got it...well in my browser at least ;)

You can see it work by adjusting the number of copies of the "lots of content" line anywhere form 1, to 10, to 50, or more.

Here is the revised code:





<html>
<head>
<style type = text/css>
.red {
   background-color: #F00;
}
.green {
   background: #0C6;
}
.yellow {
   background: #FF0;
}
-->
</style>
</head>
<body>
<table border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="215" colspan="5" valign="top" class="red">&nbsp;</td>
  </tr>
  <tr>
    <td width="20" height="85" valign="top"></td>
    <td width="630" height="85" valign="top" class="yellow">&nbsp;</td>
    <td width="20" height="85" valign="top"></td>
    <td width="253" height="85" valign="top" class="green">&nbsp;</td>
    <td width="17" height="85" valign="top"></td>
  </tr>
  <tr>
    <td width="20" height="85" valign="top"></td>
    <td width="630" rowspan="4" valign="top" class="yellow">
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
     lots of content, very tall box<br>
    </td>
    <td width="20" height="85" valign="top"></td>
    <td width="253" rowspan="4" valign="top" >
     <table border="1" cellspacing="0" cellpadding="0" width="100%">
      <tr>
       <td width="253" height="83" valign="top" class="green">&nbsp;</td>
      </tr>
      <tr>
       <td width="253" height="83" valign="top" class="green">&nbsp;</td>
      </tr>
      <tr>
       <td width="253" height="83" valign="top" class="green">&nbsp;</td>
      </tr>
     </table>
    </td>
    <td width="17" height="85" valign="top"></td>
  </tr>
</table>
</body>
</html>

Open in new window

Author

Commented:
Super thanks very much!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial