How to make table resize with browser?

[may1hem]

I have a page which displays photos and I want to have 2 pieces of text at the top of the page. At the top-left I want it to say "My photos", and on the top-right I want it to say "Remember to scroll the panoramas".

I want both of these pieces of text on the same line to conserve screen space, so I thought of using a table. Here is the code I tried:

---------------------
<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;>
<tr>
<td>My photos</td>
<td align=&quot;right&quot;>Remember to scroll panoramas</td>
</tr>
</table>
---------------------

This joins the 2 pieces of text together, which is not what I want. I want the text on the right to move as the browser is resized so it is as far away from the &quot;My photos&quot; text but is still visible at different browser sizes.

Any ideas on how to fix this?

Thx,
May

 

[may1hem]

Just an additional point, I tried setting the column width of the first column to 80%, and this is ok when the browser size is large, but messes up if the browser is resized smaller.

Any other ideas welcome...

Thx,
May

 

[humbleprogrammer]

Try something like this:

<div align=&quot;center&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;800&quot;>
<tr>
<td width=&quot;266&quot;>
<p align=&quot;left&quot;>My photos</td>
<center>
<td width=&quot;267&quot;></td>
</center>
<td width=&quot;267&quot;>
<p align=&quot;right&quot;>Remember to scroll panoramas</td>
</tr>
</table>
</div>