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

[HelloSunshine]

well, first off, WHAT do you want to align?

[scotchtape8888]

all my div blocks. i have one for subscriptions, one for blogrings, and one for the body.

[scotchtape8888]

argh! i've tried everything. i've used absolute alignment; div can't be put on top. i've used z-index; it doesn't do anything. i am so frustrated..

[kellyannie]

did you try changing these

margin-top: ###px;
margin-left: ###px;

you can use negative numbers too, usually you end up having to, so it would be like -300px

[scotchtape8888]

yah.. but i couldn't figure out how to use the numbers. err-- i was hoping there's another way..

like, i couldn't figure out what numbers to put in and when i viewed the page with different browsers, the divisions were in completely different places on the page.

[*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.

[scotchtape8888]

so.. :gulp: guess and check?

g--..

ok.

..

thanks.

anywhoo.. ok, so why do they have two completely different positionings in internet explorer and firefox?

[*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.

[scotchtape8888]

it worked. thanks. i guess i'll just use ie for all my xanga-surfing activities. i think i kinda understand how it works now.

just one more question: it doesn't APPEAR to, but does the "position: static" property have any real effect on the page?