CSS & layer positioning

I'm using layers but finding that I'm having to make seperate pages for different screen resolutions....I tried using percentages instead of pixels but it doesn't work! I've pasted a sample from my page for a layer (About)......any suggestions? I'm stuck!





Example:

#About { left: 315px; position: absolute; top: 50px; visibility: hidden; z-index: 1 }




<div id="About">
<table bgcolor="black" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table bgcolor="#FFD784" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a class="menus" href="/history.cfm" onmouseout="menuOut('rollimg0')" onmouseover="menuOver('rollimg0')" target="_top"><b>History</b></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

#About { position: absolute; top: 50px; left: 315px; z-index: 1 }

visibility: hidden; will simply hide the layer.

Show us an example of something you tried that "doesn't work". Tell us what you expect it to do or look like, and what it actually does or looks like.

OK, I hope this makes sense..... I have a dummy version (of sorts) that I've made as I would have to make it if by using my current coding, I wanted it to display correctly depending on screen size.... I've done examples of both in % and pixels. Ideally I would like to not have to make different pages for every screen size but rather one that formats accordingly. Depending on your screen size, if you have a 1024x768 then look at it normal and then resize your window to see how it doesn't reformat. I hope this seriously makes sense cause now I'm even confused at what I posted... Any help greatly appreciated!

The colors are wrong or not the same, but I don't care about that currently, I just want to get the coding right!


1024x768 - %
1024x768 - px


800x600 - %
800x600 - px