Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 4 of 4

Thread: Vertically stretching HTML table / cell

  1. #1

    Vertically stretching HTML table / cell

    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>
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	splashpage.gif 
Views:	54 
Size:	14.7 KB 
ID:	34573  
    Last edited by pixi; March 24th, 2006 at 05:40 AM.
    What would happen if you hired two private detectives to follow each other?
    http://www.mailgloo.com

  2. #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:

    <!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">


    change it to this
    <html>

    It may not be 100% xhtml css standards etc, but it makes it work...

  3. #3
    Thanks soo much Yopure a star Works a treat
    What would happen if you hired two private detectives to follow each other?
    http://www.mailgloo.com

  4. #4
    cool!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012