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*]

well its not really that hard, you just have to be VERY patient. usually when you put a div up, it's all in the wrong position. you mess with the margin left or right or bottom or top. do you know what margin means right? the amount of pixels between the text and the left/right/bottom/top of the div. i think that's right. if you want to move something to the right, you would put margin-right: ###px keep on changing the numbers, either higher or lower, based on where you want to move it, either further left or further right. does that make sense? and do the same for the other sides.