Relative positioning on MySpace

MySpace Website Tutorials | Submited Dec 16, 2007

Written by: Mr. ∃v¡l

Notes;

relative positioning isn't a very myspace friendly thing unless you know what you're doing.

This is just a basic guide, copy and paste won't work, it requires a bit of effort.

left:50% is just for position:absolute; to make sure it works in all resolutions, don't use it with position:Relative;

basically...

I'm assuming you're using something like FeedTheDragon's hide everything code that moves everything up. This is why you need a "wrap" that you put the other divs in:

.Wrap{
position:absolute;
left:-50%;
margin-left:-400px;
top:140px;
}

<div class="Wrap">



</div>

then inside of that you put your relative divs:

.relativeDiv{
position:relative;
top:10px;
left:250px;
width:300px;
background-color:555555;
margin-top:5px;
border:3px solid;
border-color:333333;
}

<div class="relativeDiv">

</div>

if you're making a series of the same boxes there's no need to repeat the code or make new class names.

in the end

once you include the hide everything code, and your body/text settings you should have something like this:

<style type="text/css">
table table table, embed, .navigationBar{visibility:hidden; margin-top:-37182px;}
table table table div{visibility:visible;}
table tr td div div a.text u,
table tr td div div a u{display:none}
table, tr, td{background-color:transparent; border:0;}
body{background-color:000;}
*{color:000!important; font-family:Arial Narrow!important;}


.37182{position the main div that holds the other divs}
.Wrap{
position:absolute;
top:140px;
left:50%;
margin-left:-400px;
}

.37182{
this is the div thats relatively positioned
note: left:50% is not needed with position:relative;
}
.relativeDiv{
position:relative;
top:10px;
left:250px;
width:300px;
background-color:555555;
margin-top:5px;
border:3px solid;
border-color:333333;
}

</style>

<div class="Wrap">


<div class="relativeDiv">
This is positioned according to wherever it's placed in the code. :)<br /><br />
now I need to take up space =/ now I need to take up space =/ now I need to take up space =/ now I need to take up space =/ now I need to take up space =/ now I need to take up space =/ now I need to take up space =/ now I need to take up space =/ now I need to take up space =/ now I need to take up space =/
</div>

<div class="relativeDiv">
this one is right below the other one. woo!
</div>


</div>

And it looks like this