HTML - Problems Aligning Bottom And Right In A Table

I am attempting to have a table cell that is outlined. No matter how much text ends up in that table cell, the top part should align to the top, and the bottom part should align to the bottom. The cell size/border needs to be consistent across the row (which is why I didn't just float some divs).

I have spent hours looking online, and have found various "solutions" that do not in fact seem to work.

Here is my 'sample' code. I know that the valign isn't working, I just put it in there so it makes sense "logically" what I am trying to do.

Thank you in advance for any help you can provide.

Code:

<table width="600">
	<tr>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Hi guys
I've spent the best part of two hours attempting this and have been failing. Miserably.

What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap.

All help appreciated, thanks in advance.
Antonz

I get how to align two sections of text, one at the left of screen and one on the right, but how do I put this line at the bottom of the screen? I tried pretty much every combination now, bottom:0, vertical-align:bottom, vertical-align:text-bottom, with and without a parent div container, nothing works! The moment I try to put the line of text at the bottom of the screen the left/right alignment would be messed up or it wouldn't show at all. It seems html only allows you to align it left/right OR bottom/top, but not both?
Any help is appreciated.

This is what I have so far:

Code:

HTML:
<div style="clear:both;" id="bottom">
  <p class="left">Text to go on left.</p>
  <p class="right">Text to go on right.</p>
</div>

CSS:
#bottom {
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}

Hello there i have just created a simple website using div tags as layers to position link elements on the page. I have 2 pages the first page has an image link that takes the user to the second page and the image link has been aligned in a div tag to position it onto the screen. When i test the first page in most browsers the aligning seems to be perfect and is aligning well in all browsers.

The problem im facing is on the second page, i have done exactly the same procedure to align a form element and an image link but when published and previewed in safari it is aligned perfectly but in most other browsers the div aligning for the form and the image link are not aligned at all. i cant figure out this problem because the first page is done exactly the same way and that works in all browsers, could someone please please have a look for me its probably something really simple but i cant see it. Below is the source code for both page 1 with the aligning in all browsers image link, and the second page the one that needs to be positioned correctly in all browsers:

(PAGE 1 THE IMAGE LINK ON THIS PAGE ALIGNS CORRECTLY IN ALL BROWSERS AND IS FIN)

<HTML>
<HEAD>
<TITLE>HARMONIC WEBSITE p1guides</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

</HEAD>

<BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >

<div align="center">


<div style="background-image:url('Background.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;">



<div style="z-index: 1; align: right; padding-top: 517px; padding-left: 273px;>

<a href="index.html></a> <a href="page2.html"><IMG SRC="images/index_19.jpg" BORDER=0 WIDTH=219 HEIGHT=44 ALT=""></a>

</div>



</div>


</div>


</BODY>
</HTML>



(PAGE 2 THE FORM AND IMAGE LINKS ARE POSITIONED EXACTLY THE SAME AS PAGE 1 BUT APPEAR TO BE OUT OF POSITION IN DIFFERENT BROWSERS?)



<HTML>
<HEAD>
<TITLE>HARMONIC WEBSITE p2guides</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (HARMONIC WEBSITE p2guides.psd) -->

<BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >

<div align="center">


<div style="background-image:url('Backgroundp2.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;">






<div style="z-index: 1; padding-top: 260px; padding-left: 700px;>




<TABLE WIDTH=328 BORDER=0 CELLPADDING=0 CELLSPACING=0 >

<TD IMG SRC="form background.jpg" WIDTH=328 HEIGHT=248 BORDER=1 ALIGN="LEFT">



<form action="mailto:YOUR EMAIL ADDRESS" method="post" enctype="text/plain" border=0 >
<br>
<input type="text" name="name"
value="" size="30">
<br><br>


<input type="text" name="Position/primary specialty"
value="" size="30">
<br><br>
<input type="text" name="Number of patients treated"
value="" size="5">
<br><br>

<input type="text" name="Hospital"
value="" size="30">
<br><br>

<input type="text" name="Email address"
value="" size="25">
<br><br>

<a href="page3.html">
<input type="submit" value="Send">
<a>
<input type="reset" value="Reset">

</form>

</TD>


</div>
<div style="z-index:2; padding-top: 66px; padding-left: 520px; margin-top: 0px;>

<a href="index.html></a> <A HREF="http://www.harmonic.com">

<IMG SRC="p2-click_15.jpg" BORDER="0" WIDTH=46 HEIGHT=21 ALT=""></A>
</div>
</div>
</BODY>
</HTML>

I'm trying to make a navigation bar that has the buttons taking up the full height of the container it is in, and have a width with just a few pixels padding on each side.

Full height problem: I added this code: Code:

ul#nav li { height: 100%; }

but it only takes up as much as the padding takes up.

Padding problem: When I add padding/margin on the top, instead of bumping the actual navigation button down, it overflows on the top and so there is a little green square sticking out. I want it to be perfectly centered inside the container.


Please help!

Thanks.