ansaurus

Question

Have Elements at both top and bottom of <td>

Answer 1

+1 A:

Not sure if it's the best way, but this should work.

<html>  
<head></head>  
<body>  
<table border="1">  
  <tr>  
    <td style="padding:0;height:100%;">  
      <table style="height:100%;">
        <tr>
            <td style="vertical-align:top;">        
                <p style="vertical-align: top;">Some text</p> 
            </td>
        </tr>
        <tr>
            <td style="vertical-align:bottom;">
                <form>  
                  <input type="submit" value="should be at bottom of td"/>  
                </form> 
            </td>
        </tr>
      </table> 
    </td>  
    <td>  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />  
      This <br />   
    </td>  
  </tr>  
</table>  
</body>  
</html>

Matt 2010-09-13 16:00:56

Thanks Matt, but this breaks when there are multiple rows where the 2nd `<td>` is of varying height.

Suan 2010-09-14 05:19:34

Updated try that.

Matt 2010-09-14 12:20:49

Unfortunately this breaks in Chrome too, even if I set the height on the `<tr>s`

Suan 2010-09-14 17:12:14

Answer 2

A:

You should be able to use CSS positioning. Try this, but use a CSS stylesheet of course :-)

<td style="height:100%">
   <div style="position:relative;height:100%;">
      <p>Some text</p>
      <form style="position:absolute;bottom:0;">...</form>
   </div>
</td>

Note that you need to place a div inside of the td because the position attribute wont work within the td

BIGDeutsch 2010-09-13 16:24:00

@BIGDeutsch: Your solution works and is a good solution. However, it doesn't work with the DOCTYPE my team is using: XHTML 1.0 Transitional. I've even validated the page, but what happens is that the `<div>` never stretches to fit the height of the `<td>`, so all the content stays in the vertical middle. Any ideas to make this work in XHTML?

Suan 2010-09-14 02:59:25

Another update: Turns out that the XHTML Doctype wasn't the exact problem. The problem is that this solution only works with _no_ Doctype (ie Quirksmode). As before, hopefully somebody has other ideas while I investigate further - I would hate to think that this can't be done!

Suan 2010-09-14 05:26:59

Try adding a height of 100% to the tr?

BIGDeutsch 2010-09-14 08:26:23

Wow why didn't I think of that? Still, unfortunately it only works on Firefox and not Chrome...

Suan 2010-09-14 16:33:39

Answer 3

+1 A:

Finally found out how to do it. The key was to set the height of the <table> to 100%. I also removed the <p> around the top-aligned text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
  <title></title>
</head>

<body>

<table border="1" style="height: 100%;">
  <tr>
<td style="height:100%;">
   <div style="position:relative;height:100%; margin:0; padding:0;">
      Some text
      <form style="position:absolute;bottom:0px; margin:0; padding:0;">...</form>
   </div>
</td>
    <td>
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
    </td>
  </tr>
</table>

</body>
</html>

Suan 2010-09-15 03:09:04

ansaurus

tags:

views:

answers:

Have Elements at both top and bottom of <td>

related questions