problems hiding default myspace layout Options

[missDanish]

I'm not sure why I'm getting parts of the old myspace
layout coming through, although I'm guessing it's got to do with
me using my first div to hold the other div boxes rather than just
to cover the general ugliness that is myspace.


Ideally I want the background to be behind all of the layout.

Is there a way that I can just create a div to hold the background
and then put all my other divs ontop of it without having to
reposition everything by widening my "profile" div?



Any help would be really appreciated.


Demo of the Myspace Layout



My Code: 1st part

CODE

<style type="text/css">
.btext {display:none;}
.contacttable {display:none;}
.lightbluetext8 {display:none;}
.nametext {display:none;}
.orangetext15 {display:none;}
.redlink {display:none;}
.whitetext12 {display:none;}
.hidethem {visibility:hidden; display:none;}
.comments {visi­bility:hi­dden;display:none;}
.userProfileDetail {visi­bility:hi­dden;display:none;}


body {
background-color:black;
background-image: url(http://i142.photobucket.com/albums/r115/miss_danish/bg2-2.png);
background-repeat:repeat;
background-position:center;
}
table tr td {
background-color:black;
}

.profile
{
top: 172px;
width:564px;
height:460px;
position:absolute;
left: 50%;
margin-left: -282px;
z-index:0;
}

.flower{
border:2px solid white;
position:absolute;
top: 0px;
left: 0px;
width: 307px;
height: 230px;
background-image: url(http://i142.photobucket.com/albums/r115/miss_danish/y1.png);
z-index:2;
}

.about{
border:2px solid white;
position:absolute;
padding: 20px;
top: 190px;
right: 0px;
left: 278px;
width: 287px;
height: 245px;
background-color:black;
z-index:1;
text-align:right;

color: white;
font-face:Century Gothic;
font-size:24px;


}


.details{
position:absolute;
padding-left: 20px;
padding-right: 10px;
top: 67px;
left: 10px;
width: 245px;
height: 150px;
background-color:black;
z-index:1;
text-align:justify;
color:white;
overflow: auto;
font-family:verdana;
font-size:12px;
scrollbar-base-color: white;
scrollbar-track-color:black;

}

.linkbox{
border:2px solid white;
position:absolute;
padding: 20px;
top: 0px;
right: 0px;
width: 240px;
height: 180px;
background-color:black;
z-index:1;
text-align:right;

}

.links{
position:absolute;
top: 30px;
left: 40px;
width:162px;
height:119px;
background-image: url(http://i142.photobucket.com/albums/r115/miss_danish/giffy.gif);
z-index:2;
}

.commentspace{
border:2px solid white;
position:absolute;
padding: 20px;
top: 245px;
left: 0px;
width: 265px;
height: 190px;
background-color:black;
z-index:1;
}

.commentbox{
position:absolute;
top: 35px;
left:30px;
z-index:4;
}


a.HOME{position: absolute; top:0px; left:0px; height:19px; width:162px; z-index:3; }
a.PICTURES{position: absolute; top:25px; left:0px; z-index:3; height:19px; width:162px; }
a.MSG{position: absolute; top:50px; left:0px; z-index:3; height:19px; width:162px; }
a.BLOG{position: absolute; top:75px; left:0px; z-index:3; height:19px; width:162px; }
a.ADD{position: absolute; top:100px; left:0px; z-index:3; height:19px; width:162px; }

a.HOME:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/home.gif); }
a.PICTURES:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/pictures.gif); }
a.MSG:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/message.gif); }
a.BLOG:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/blog.gif); }
a.ADD:hover{background: url(http://i142.photobucket.com/albums/r115/miss_danish/add.gif); }

</style>

My Code: 2nd part

CODE

<div class = "profile">

<div class = "flower"></div>

<div class = "commentspace">
<div class = "commentbox">

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="FRIEND_ID_HERE">
<textarea name="f_comments" id="f_comments" style="
background-color:CCCCCC!important;
scrollbar-base-color: white;
scrollbar-track-color:black;
border-width:1px!important; border-color:white!important;
border-style:solid!important; text-align:center; font-family:Verdana!important; font-size:10px!important; color:black!
important; width:200px!important; height:100px!important; line-height:20px !important; ">say something here!</textarea>
<input type="submit" value="Submit" style=" width:200px!important;
height:20px!important; background-color:FFFF99!important;
background-image: url(http://); background-position: top left;
background-attachement: fixed; background-repeat: repeat; border-width:1px!important; border-color:FFFF99!important;
border-style:solid!important; font-family:Century Gothic!important; font-size:10px!important;
font-weight:bold; color:black!important; letter-spacing:1px !important; "></form>



</div>
</div>

<div class = "linkbox">
<div class = "links">


<a href = "http://home.myspace.com/index.cfm?fuseaction=user" class = "HOME"></a>
<a href = "http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=FRIEND_ID_HERE" class = "PICTURES"></a>
<a href = "http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=FRIEND_ID_HERE" class = "MSG"></a>
<a href = "http://blog.myspace.com/FRIEND_ID_HERE" class = "BLOG"></a>
<a href = "http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=FRIEND_ID_HERE" class = "ADD"></a>

</div>
</div>


<div class = "about">

<font face = 'Century Gothic'>About Me</font>
<div class = "details">about me .... etc... </div>
</div>

</div>

<DIV class="comments"><table><tr><td><table><tr><td>