ARGH! DOWN WITH MARGIN PROPERTIES! Options

[scotchtape8888]

so, i made this skin (its not great, but i do say it's a start for my first) i finished everything today and realized that i have no idea whatsoever how to align things. i've been playing with the "margin-top" and "margin-left" css elements for an hour and just can NOT get them to go where they're supposed to!

can anyone tell me how to do this correctly/if there's an easier way (like uh.. idk.. ABSOLUTE LOCATIONS?!) <--seriously, why does css not have this?!

(also, it might be noted that i am getting two completely different positionings on my different web browsers (ie and firefox))

DEFINITELY, i'm very frustrated with xanga skins right now. help would be greatly appreciated.

CODE

<!-- begin code provided by createblog.com -->
<!-- "Counting Down The Days..." by Steve

Russell code from template at

www.createblog.com -->
<!-- colors: red: b70926 white: ffffff green:

30b048-->
<img

src="http://www.angeltowns3.com/members/scotch

tape8888/xangaskins/christmas/background.png"

border=0 ismap usemap="#christmas">

<map name="Christmas">
<area shape="rect" coords="654,198,706,211"

href="http://www.xanga.com/private/home.aspx">
<area shape="rect" coords="721,198,773,211"

href="http://www.xanga.com/profile.aspx?user=s

cotchtape8888">
</map>


<!-- Subscriptions -->
<div style="scrollbar-arrow-color: ffffff;
scrollbar-track-color: b70926;
scrollbar-shadow-color: ffffff;
scrollbar-face-color: b70926;
scrollbar-highlight-color: b70926;
scrollbar-darkshadow-color: ffffff;
scrollbar-3dlight-color: b70926;
margin-top: ###px;
margin-left: ###px;
width: 196px;
height: 253px;
overflow: auto;
background-color: transparent;
cursor: default;">
Subscriptions..
<!-- put Subscription links here -->
</div>


<!-- Blogrings -->
<div style="scrollbar-arrow-color: ffffff;
scrollbar-track-color: b70926;
scrollbar-shadow-color: ffffff;
scrollbar-face-color: b70926;
scrollbar-highlight-color: b70926;
scrollbar-darkshadow-color: ffffff;
scrollbar-3dlight-color: b70926;
margin-top: ###px;
margin-left: ###px;
width: 196px;
height: 233px;
overflow: auto;
background-color: transparent;
cursor: default;">
Blogrings..
<!-- put Blogring links here -->
</div>


<!-- Blog Body -->
<div style="scrollbar-arrow-color: ffffff;
scrollbar-track-color: b70926;
scrollbar-shadow-color: ffffff;
scrollbar-face-color: b70926;
scrollbar-highlight-color: b70926;
scrollbar-darkshadow-color: ffffff;
scrollbar-3dlight-color: b70926;
margin-top: ###px;
margin-left: ###px;
width: 518px;
height: 364px;
overflow: auto;
background-color: transparent;
cursor: default;">

<style type="text/css">
table.navigation, table.footer { display:

none;}
.#rblEprops{display: none;}
#pnlEnabled table, #htmleditor, #lblTimeZone,

#pnlEprops, #rblEprops /* width of the comment

page */
{width: 245px;}
.leftmoduletitlebar, .leftmoduleborder,

.leftmoduleinterior, table.left, table.left

TH, table.left TD, table.navigation,

table.footer
{display: none;}

/* edits the date */
div.blogheader, .caption
{font-family: Lucida Calligraphy;
text-transform: none;
font-size: 20px;
line-height: 30px;
font-weight: bold;
color: ffffff;
letter-spacing: 3px;
text-align: center;
}

input, select, textarea, iframe.htmleditor,

.textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 2px solid ffffff;
font: normal 15px Georgia;
background-color: transparent;
font-color: ffffff;}

table.footer TD {
/* this makes the footer at the bottom

centered */
/* leave it alone unless you know what to do*/
text-align: center;}

font,td,p,xmp
{color: ffffff;
font-face: Georgia;
font-weight: thin;
font-size: 10pt;
text-align: justify;}

table.blogbody tr td {
/* this edits the left margin of blog */
width: 5px;
padding-left: 5px;}

table.blogbody {
/* this edits the other the place where the  

blog is */
background-color: transparent;
family-font: Georgia;
border: ffffff 3px solid;
width: 500px;} /* <-- The width for this

should be around 5-15 pixels less then the

width for your blog's div layer. */

a:link
{font-family: Georgia;
font-weight: thin;
color: ffffff;
text-transform: none;
font-size: 10pt;
cursor: default;}

a:active
{font-family: Georgia;
font-weight: thin;
color: ffffff;
text-transform: none;
font-size: 10pt;
cursor: default;}

a:visited
{font-family: Georgia;
font-weight: thin;
color: ffffff;
text-transform: none;
font-size: 10pt;
cursor: default;}

A:hover
{{font-family: Georgia;
font-weight: thin;
color: ffffff;
text-transform: none;
font-size: 10pt;
cursor: default;}
</style>

<style type="text/css">
table.navigation, table.footer {

display:none;}
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone,

#pnlEprops, #rblEprops
/* width of the comment page */
{width:245px;}
.leftmoduletitlebar, .leftmoduleborder,

.leftmoduleinterior, table.left, table.left

TH, table.left TD, table.navigation,

table.footer
{display: none;}
</style>


<!-- DO NOT CLOSE THIS DIV TAG -->
<!-- end code provided by createblog.com -->

[*mona lisa*]

does it work though? yea ie and firefox are very different. the divs will be fine for one and messed up for the other. it's like that.