# Vertically stretching HTML table / cell

**URL:** <https://forum.kirupa.com/t/vertically-stretching-html-table-cell/183163>\
**Category:** web dev\
**Created:** [March 24, 2006, 9:29am UTC](https://forum.kirupa.com/t/vertically-stretching-html-table-cell/183163 "2006-03-24T09:29:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pixi](https://avatars.discourse-cdn.com/v4/letter/p/5fc32e/32.png) [@pixi](https://forum.kirupa.com/u/pixi)\
**Post date:** [March 24, 2006, 9:29am UTC](https://forum.kirupa.com/t/vertically-stretching-html-table-cell/183163/1 "2006-03-24T09:29:03Z")

</div>

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”\>&nbsp;\</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\>

---

<div class="post-metadata">

**Author:** ![kallisti](https://avatars.discourse-cdn.com/v4/letter/k/f0a364/32.png) [@kallisti](https://forum.kirupa.com/u/kallisti)\
**Post date:** [March 24, 2006, 10:04am UTC](https://forum.kirupa.com/t/vertically-stretching-html-table-cell/183163/2 "2006-03-24T10:04:27Z")

</div>

**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](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)”\>  
\<html xmlns=“[http://www.w3.org/1999/xhtml](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:

---

<div class="post-metadata">

**Author:** ![pixi](https://avatars.discourse-cdn.com/v4/letter/p/5fc32e/32.png) [@pixi](https://forum.kirupa.com/u/pixi)\
**Post date:** [March 24, 2006, 10:26am UTC](https://forum.kirupa.com/t/vertically-stretching-html-table-cell/183163/3 "2006-03-24T10:26:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kallisti](https://avatars.discourse-cdn.com/v4/letter/k/f0a364/32.png) [@kallisti](https://forum.kirupa.com/u/kallisti)\
**Post date:** [March 24, 2006, 10:30am UTC](https://forum.kirupa.com/t/vertically-stretching-html-table-cell/183163/4 "2006-03-24T10:30:39Z")

</div>

cool! :thumb2:
