div table aligned to layout, my div tables are not aligned Options

[mz_sexy_senorita]

help! everytime i view my site with other people's PC with different screen resolutions, my div tables get messed up, or they are not aligned anymore, but when i view them to my computer, they are aligned... how can i align them properly so that they will be aligned to any screen resolution?

here is a sample of my layout:
touch of pink <--click on the link

if you have different screen resolution, the div tables are not aligned...

can someone help me out of this? thanks in advance...

[mz_sexy_senorita]

<title> TOUCH OF PINK >>________//PRINSESA.NET</title>

<style type="text/css">
body {background-image: url(http://img93.exs.cx/img93/4544/bubblegumbg2wi.jpg); 
background-attachment: fixed;}
</style>

<span style="position: absolute; right:150; top:50">
<IMG SRC="http://img78.exs.cx/img78/5505/version102ym.jpg" USEMAP="#VERSION10" BORDER=0>
<MAP NAME="VERSION10">
  <AREA SHAPE=RECT COORDS="233,589,321,606" HREF="http://www.freewebs.com/cherrielips/aboutthegirl.html"  ALT="about me"  TARGET="eyecandy"  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status='about me'; return true">
  <AREA SHAPE=RECT COORDS="327,589,420,606" HREF="http://www.freewebs.com/cherrielips/eyecandy.html"  ALT="pics"  TARGET="eyecandy"  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status='pics'; return true">
</MAP></span>

<span style="position:absolute; left:788px; top:116px; ; width: *;height:*; z-index:2">
<img src="http://img122.exs.cx/img122/8315/cam4zr.gif" width="95" height="72">
</span>
<span style="position:absolute; left:788px; top:116px; ; width: *;height:*; z-index:2">
<a href="#" onClick="small=window.open('http://www.freewebs.com/cherrielips/cam_whore.html','cam','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
zable=no,width=354,height=340');" onmouseover="window.status='Cam Whore Pam';return true" onmouseout="window.status='';return true"><img src="http://img122.exs.cx/img122/2877/cam28kr.jpg" width="95" height="72" alt="*click for mah cam*" style="border: 0 solid; border-color: #000000" style="filter:alpha(opacity=0); border:0; border-color:000000; border-style:solid" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,0,0,5)"></a><span>

<script>

/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
       
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
   
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

</script>


<span style="position: absolute; right:45; top:600"><div align="center">
<iframe src="http://www.freewebs.com/cherrielips/home.html" name="eyecandy" frameborder="0px" scrolling="yes" width="544" height="449" allowtransparency="true" style="FILTER: chroma (color=FCC87D)"></iframe>
</span>

site: My Webpage

okay so the background is just a sample layout...I'll be replacing it if someone can help align this...or someone can give some codes or someting...ope you guys can help...thanks in advance!