my boxes will not aligning Options

[kristie7]

Problem: My content on my website keeps showing up different on different resolutions and i am just about to pull my hair out

CODE

<div style="width: 100%; height: 100%; top: 0%; left: 50%; background-color: transparent" align="center"><img width="800" height="1000" border="0" src="http://img235.imageshack.us/img235/8758/template1jk5.gif" alt="" usemap="#template1_Map">
<map name="template1_Map">
<area shape="rect" alt="" coords="615,500,695,543" href="http://www.ccudesigns.com/jobs">
<area shape="rect" alt="" coords="485,500,615,544" href="http://www.ccudesigns.com/contact">
<area shape="rect" alt="" coords="331,500,485,545" href="http://www.ccudesigns.com/designers">
<area shape="rect" alt="" coords="183,500,331,546" href="http://www.ccudesigns.com/products">
<area shape="rect" alt="" coords="85,500,183,547" href="http://www.ccudesigns.com/home">
<area shape="rect" alt="" coords="36,98,172,130" href="http://www.ccudesigns.com"></map></div>
<title>|||CCU Designs||| Home</title>
<title>CCU Designs</title>
<style type="text/css">body {
background-color:#FFFFFF;
background-image:url(http://img69.imageshack.us/img69/5199/backgroundsd3.gif);
background-position:top-right;
background-attachment:none;
background-repeat:none;
cursor:default;
font-weight:normal;
}
a:link, a:visited, a:active {font:normal 15pt Prestige Elite Std; letter-spacing:1px; display:block; line-height:25px; color: #FFfffF; text-align:center; valign:center; text-decoration:none !important;}
a:hover {font:normal 15px Prestige Elite Std; letter-spacing:1px; display:block; margin-bottom:relative; line-height:25px; color:#FFfffF; text-align:center; valign:center; background-color:#ffffff; text-decoration:none !important;}
div.image
.content {
position:relative;
overflow:none;
background-color:transparent;
font-family:Prestige Elite Std;
letter-spacing:1px;
font-size:14pt;
color:ffffff;
align:center;
font-weight:normal;
margin:0;
padding:0;
}
h1 {
font:17pt "Prestige Elite Std";
margin:0px;
color:#FFfffF;
letter-spacing:1px;
border-bottom:#FFfffF 1px dot</style>
<div style="position: absolute; background-color: transparent; left: 26%; top: 100%; width: 40%; height: 100%" class="First Box">
<div align="left">
<left><strong><font color="#ffffff"><big><strong>Why Us?</strong></big></font></strong></left><strong><br>
</strong>
<left><font color="#ffffff">As one of our customers you will be given the special attention clients deserve. We want to be your choice for all graphic needs.</font></left><strong>
<left><font color="#ffffff"> </font></left></strong></div>
<p align="left"><strong><font color="#ffffff"><big><strong>Hours</strong></big><br>
</font></strong><font color="#ffffff"> All orders are completed on a first come, first served basis. Orders are filled Friday through Sunday. Meeting about orders are held during the week the weekends. Please give instructions to our designers ample time before your deadline. Two weeks in advance as a minimum is recommended.</font></p>
<div align="left"></div>
<div align="left"><strong> <font color="#ffffff"><big><strong>Locations</strong></big></font><br>
</strong><font color="#ffffff">Texas,Maryland,Virginia,DC These fuor states is where we have designers located, but this does not limit our service regions. We can communicate through e-mail, instant messaging, and the telephone also! </font><br>
</div>
<p><strong><br>
</strong></p></div>

[Relentless]

<div style="width: 100%; height: 100%; top: 0%; left: 50%; background-color: transparent" align="center">

Don't put percentages. Its probably causing the problem.

Put the exact width/height of you're image like it's suppose to be. Use px; and margin-.

CODE

<div style="width: 800px; height: 1000px; margin-top: 0px; margin-left: ##px; background-color: transparent" align="center">

Just adjust the margin-left numbers, or leave it as 0 if you want it on the top left.