Vertically stretching HTML table / cell

programming web dev
1

Hi All Ive been pulling my hair out on this one–

I need a 3 row table to stretch 100% vertically. eg row 1 (10%), row 2 (scales to fit) , and row 3 ( 10% aligned to the bottom of the page)

See sample below: ( The red circle needs to always be on the bottom of the page, the logo and content centered vertically, and the top row ( above the logo) scaling to always show the middle row vertically centered

Any ideas?

Code snippet:

<table width=“325” height=“100%” border=“0” align=“center” cellpadding=“0” cellspacing=“0”>
<tr>
<td width=“325”><img src=“spacer_splash.gif” width=“325” height=“100”></td>
</tr>
<tr>
<td><img src=“kemistry_logo_splash.gif” width=“325” height=“177”></td>
</tr>
<tr>
<td><p align=“center” class=“style1”>The brands that will endure <br>
are the ones built on their worth to society</p>
<p align=“center” class=“style1”><br>
<strong>Website Requirements</strong><br>
<strong>Minimum Resolution</strong> 1024 x 768 <br>
<strong>Flash Player 7.0</strong> Download</p>
<p align=“center” class=“style1”><strong>Design:</strong> Kemistry Creative<br>
<strong>Code:</strong> Maxdefinition</p>
<p align=“center” class=“style1”>Johannesburg<br>
<strong>South Africa<br>
<br>
</strong>+27 (0) 861 114 163</p>
<p align=“center” class=“style1”>Disclaimer<br>
Copyright</p>
<p align=“center” class=“style1”> </p>
<p align=“center” class=“style1”>works beautifully</p></td>
</tr>
<tr>
<td><img src=“red_cricle_splash.gif” width=“325” height=“69”></td>
</tr>
</table>

2

Quick Fix

make sure your body height is set to 100%, it also works differently in IE and FF.
if your html starts like this:

[COLOR=“DarkRed”]<!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”>[/COLOR]

change it to this
[COLOR=“DarkRed”]<html>[/COLOR]

It may not be 100% xhtml css standards etc, but it makes it work…:gas:

3

Thanks soo much Yopure a star :slight_smile: Works a treat :kommie:

4

cool! :thumb2: