About to lose my mind....centering div layer

[fairydreamz23]

I really hope someone can help me here. I've explored several avenues and cannot get this to work how I'd like.
I'm trying to customize a myspace for someone (I know.....hardee har) but anyways, I have one main div, then 6 divs contained inside that main div. What I would like to do is have that main div center itself in browsers. If you click here you will see how the top ad and the search bar both automatically center themselves while my main div stays positioned. If I give it a relative position and try to margin it, it screws up and aligns itself way down on the right side of the page. I've also tried a few other things, nothing seems to be working. I might be missing something stupid, but it may be because I'm about to lose my damn mind.

Here is the code I am using. (obviously I haven't gotten to my links yet)

<xmp>
<style type="text/css">
body {
background-color: 000000;
}

table {
visibility: hidden;
}

* body form {
visibility: visible;
display: block;
}

body div table, body div table td {
visibility: visible !important;
background-color: 000000 !important;
color: 000000 !important;
}

.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:hidden;display:none;}

.main {
position: absolute;
top: 160px;
left: 100px;
width: 800px;
height: 1800px;
background-color: FFFFFF;
z-index: 1;
visibility: visible !important;
}

.table1 {
position: absolute;
top: 7px;
left: 9px;
width: 784px;
height: 315px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/6119/table1fp5.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.table2 {
position: absolute;
top: 330px;
left: 7px;
width: 784px;
height: 315px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/2824/table2gk2.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.table3 {
position: absolute;
top: 300px;
left: 0px;
width: 784px;
height: 315px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/3194/table3pa1.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.table4 {
position: absolute;
top: 325px;
left: 9px;
width: 430px;
height: 346px;
background-color: FFFFFF;
visibility: visible !important;
}

.table5 {
position: absolute;
top: 400px;
left: 0px;
width: 430px;
height: 346px;
background-color: FFFFFF;
visibility: visible !important;
}

.table6 {
position: absolute;
top: -400px;
left: 420px;
width: 346px;
height: 762px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/8351/table6vg5.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.name {
position: relative;
width: 900px;
height: 1193px;
}

.name a {
text-decoration: none;
border: none;
display: block;
position: absolute;
text-indent: -5000px;
}

.sendmessage { width: 150px; height: 35px; z-index: 1; left: 775px; top: 41px }
.addtofriends { width: 150px; height: 35px; z-index: 2; left: 560px; top: 45px }
.instantmessage { width: 150px; height: 35px; z-index: 3; left: 775px; top: 67px }
.addtogroup { width: 150px; height: 35px; z-index: 4; left: 560px; top: 110px }
.forwardus { width: 150px; height: 35px; z-index: 5; left: 740px; top: 150px }
.addtofavorites { width: 150px; height: 35px; z-index: 6; left: 740px; top: 177px }
.blockuser { width: 150px; height: 35px; z-index: 7; left: 560px; top: 205px }
.rankuser { width: 150px; height: 35px; z-index: 8; left: 765px; top: 257px }
.viewfriends { width: 150px; height: 35px;; z-index: 9; left: 560px; top: 265px }
.ticketinfo { width: 450px; height: 50px; ..; left: 765px; top: 285px }
.ticketgiveaway { width: 200px; height: 35px; ..; left: 560px; top: 326px }
.realityshow { width: 200px; height: 35px; ..; left: 735px; top: 367px }
.liveinconcert { width: 200px; height: 35px; ..; left: 794px; top: 510px }
.friends { width: 150px; height: 25px; ..; left: 719px; top: 510px }
.comments { width: 150px; height: 25px; ..; left: 642px; top: 510px }
.pictures { width: 150px; height: 25px; ..; left: 569px; top: 510px }
.videos { width: 150px; height: 25px; ..; left: 794px; top: 440px }
</style>

--------------------------------------------------------------------------------------------------

<div class="main">
<div class="name">
<a href="sendmessage" class="sendmessage" />sendmessage</a>
<a href="addtofriends" class="addtofriends" />addtofriends</a>
<a href="instantmessage" class="instantmessage" />instantmessage</a>
<a href="addtogroup" class="addtogroup" />addtogroup</a>
<a href="forwardus" class="forwardus" />forwardus</a>
<a href="addtofavorites" class="addtofavorites" />addtofavorites</a>
<a href="blockuser" class="blockuser" />blockuser</a>
<a href="rankuser" class="rankuser" />rankuser</a>
<a href="viewfriends" class="viewfriends" />viewfriends</a>
<a href="ticketinfo" class="ticketinfo" />ticketinfo</a>
<a href="ticketgiveaway" class="ticketgiveaway" />ticketgiveaway</a>
<a href="realityshow" class="realityshow" />realityshow</a>
<a href="liveinconcert" class="liveinconcertt" />liveinconcert</a>
<a href="friends" class="friends" />friends</a>
<a href="comments" class="comments" />comments</a>
<a href="pictures" class="pictures" />pictures</a>
<a href="videos" class="videos" />videos</a>
<div class="table1">
<div class="table2">
<div class="table3">
<div class="table4"><embed allowScriptAccess="never" enableJSURL="false" src="http://lads.myspace.com/videos/vplayer.swf" flashvars="m=1059290204&type=video" type="application/x-shockwave-flash" width="430" height="346" top="976" left="9"></embed>
<div class="table5">
<embed allowScriptAccess="never" enableJSURL="false" src="http://lads.myspace.com/videos/vplayer.swf" flashvars="m=1374175549&type=video" type="application/x-shockwave-flash" width="430" height="346" top="1330" left="9"></embed>
<div class="table6">
</div>
</div>
</td>
</tr>

</table>
</td></tr>

--------------------------------------------------------------------------------------------------
</xmp>

If anyone could help me, it would be greatly appreciated!!!!

Thanks in advance.
-Jenessa

[Scribble69]

http://www.shadow-fox.net/site/tutor...-Layout-in-CSS

[fairydreamz23]

I've tried everything. It seems there may be something else in my code that is screwing it up. I managed to get it to center a bit, but it is centering the left side of the wrapper div in the center instead of the center of the wrapper div.
I put the text-align: center; into my body and then added the margin: 0 auto; to my wrapper div and deleted the left position and that's what it did. I had to leave the top position or it would throw it way down the page.

so heres what i have for those two sections now.

<style type="text/css">
body {
background-color: 000000;
text-align: center;
min-width: 800px;
}

and the rest of the css continues.......then my wrapper div

.main {
position: absolute;
margin: 0 auto;
top: 160px;
width: 800px;
height: 1800px;
background-color: FFFFFF;
z-index: 1;
visibility: visible !important;
}

</style>

I have fiddled with this to no end. I have read all the tutorials, have tried everything. Nothing is working. This is the page I'm working on-->stagelive

[Accurax]

Envelope your entire code (body) inside one #divwrapper, then you should be able to position this wrapper in the center of the page, the rest of the content will therefore also be centred due to it being contained by the wrapper.

Hope this helps

Edit: i see youve allready treid this, sorry i should read more carefully, its getting late here now, but ill tahe a look tomorrow if you still cant fix it if thats ok?

Any chance you can post the html aswell please??

[fairydreamz23]

Yes, I will definitely give you the html again, and hell no, I don't care if you wait till tomorrow I appreciate any help so much, because as I said, I'm about to lose it.

Here is the code I'm using.

<style type="text/css">
body {
background-color: 000000;
text-align: center;
min-width: 800px;
}

table {
visibility: hidden;
}

body form {
visibility: visible;
display: block;
}

body div table, body div table td {
visibility: visible !important;
background-color: 000000 !important;
color: 000000 !important;
}

.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 {visibility:hidden; display:none;}

.main {
position: absolute;
margin: 0 auto;
top: 160px;
width: 800px;
height: 1800px;
background-color: FFFFFF;
z-index: 1;
visibility: visible !important;
}

.table1 {
position: absolute;
top: 7px;
left: 9px;
width: 784px;
height: 315px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/6119/table1fp5.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.table2 {
position: absolute;
top: 330px;
left: 7px;
width: 784px;
height: 315px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/2824/table2gk2.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.table3 {
position: absolute;
top: 300px;
left: 0px;
width: 784px;
height: 315px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/3194/table3pa1.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.table4 {
position: absolute;
top: 325px;
left: 9px;
width: 430px;
height: 346px;
background-color: FFFFFF;
visibility: visible !important;
}

.table5 {
position: absolute;
top: 400px;
left: 0px;
width: 430px;
height: 346px;
background-color: FFFFFF;
visibility: visible !important;
}

.table6 {
position: absolute;
top: -400px;
left: 420px;
width: 346px;
height: 762px;
background-color: 000000;
background-image: url(http://img297.imageshack.us/img297/8351/table6vg5.jpg);
background-position: top center;
background-repeat: no-repeat;
z-index: 1;
visibility: visible !important;
}

.name {
position: relative;
width: 900px;
height: 1193px;
}

.name a {
text-decoration: none;
border: none;
display: block;
position: absolute;
text-indent: -5000px;
}

.sendmessage { width: 150px; height: 35px; z-index: 1; left: 775px; top: 41px }
.addtofriends { width: 150px; height: 35px; z-index: 2; left: 560px; top: 45px }
.instantmessage { width: 150px; height: 35px; z-index: 3; left: 775px; top: 67px }
.addtogroup { width: 150px; height: 35px; z-index: 4; left: 560px; top: 110px }
.forwardus { width: 150px; height: 35px; z-index: 5; left: 740px; top: 150px }
.addtofavorites { width: 150px; height: 35px; z-index: 6; left: 740px; top: 177px }
.blockuser { width: 150px; height: 35px; z-index: 7; left: 560px; top: 205px }
.rankuser { width: 150px; height: 35px; z-index: 8; left: 765px; top: 257px }
.viewfriends { width: 150px; height: 35px;; z-index: 9; left: 560px; top: 265px }
.ticketinfo { width: 450px; height: 50px; ..; left: 765px; top: 285px }
.ticketgiveaway { width: 200px; height: 35px; ..; left: 560px; top: 326px }
.realityshow { width: 200px; height: 35px; ..; left: 735px; top: 367px }
.liveinconcert { width: 200px; height: 35px; ..; left: 794px; top: 510px }
.friends { width: 150px; height: 25px; ..; left: 719px; top: 510px }
.comments { width: 150px; height: 25px; ..; left: 642px; top: 510px }
.pictures { width: 150px; height: 25px; ..; left: 569px; top: 510px }
.videos { width: 150px; height: 25px; ..; left: 794px; top: 440px }
</style>

-------------------------------------

<div class="main">
<div class="name">
<a href="sendmessage url" class="sendmessage" />sendmessage</a>
<a href="addtofriends url" class="addtofriends" />addtofriends</a>
<a href="instantmessage url" class="instantmessage" />instantmessage</a>
<a href="addtogroup url" class="addtogroup" />addtogroup</a>
<a href="forwardus url" class="forwardus" />forwardus</a>
<a href="addtofavorites url" class="addtofavorites" />addtofavorites</a>
<a href="blockuser url" class="blockuser" />blockuser</a>
<a href="rankuser url" class="rankuser" />rankuser</a>
<a href="viewfriends url" class="viewfriends" />viewfriends</a>
<a href="ticketinfo url" class="ticketinfo" />ticketinfo</a>
<a href="ticketgiveaway url" class="ticketgiveaway" />ticketgiveaway</a>
<a href="realityshow url" class="realityshow" />realityshow</a>
<a href="liveinconcert url" class="liveinconcertt" />liveinconcert</a>
<a href="friends url" class="friends" />friends</a>
<a href="comments url" class="comments" />comments</a>
<a href="pictures url" class="pictures" />pictures</a>
<a href="videos url" class="videos" />videos</a>
<div class="table1">
<div class="table2">
<div class="table3">
<div class="table4"><embed allowScriptAccess="never" enableJSURL="false" src="http://lads.myspace.com/videos/vplayer.swf" flashvars="m=1059290204&type=video" type="application/x-shockwave-flash" width="430" height="346" top="976" left="9"></embed>
<div class="table5">
<embed allowScriptAccess="never" enableJSURL="false" src="http://lads.myspace.com/videos/vplayer.swf" flashvars="m=1374175549&type=video" type="application/x-shockwave-flash" width="430" height="346" top="1330" left="9"></embed>
<div class="table6">
</div>
</td>
</tr>

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

------------------------------------------------------------

Like I said, I managed to get it working a tiny bit, and it centered the left side of my wrapper instead of the middle and I can't figure out why. I've tried every which way imaginable. When I deleted the left position is when it finally centered, but with that left side instead of the middle. If I take off the top position it throws the page off down on the bottom, and also when I delete the absolute positioning. The code I just gave you is the closest I've been able to come to getting it centered. I appreciate any help. I know I'm not retarded, but I must be either over looking something or the code simply wont work on myspace. I know I can't use any "#" in the code, but I don't think theres anything else I can't use.

[Daniel]

use the [code] tags - makes it easier to read.

[Accurax]

<div class="main">
<div class="name">
<a href="sendmessage url" class="sendmessage" />sendmessage</a>
<a href="addtofriends url" class="addtofriends" />addtofriends</a>
<a href="instantmessage url" class="instantmessage" />instantmessage</a>
<a href="addtogroup url" class="addtogroup" />addtogroup</a>
<a href="forwardus url" class="forwardus" />forwardus</a>
<a href="addtofavorites url" class="addtofavorites" />addtofavorites</a>
<a href="blockuser url" class="blockuser" />blockuser</a>
<a href="rankuser url" class="rankuser" />rankuser</a>
<a href="viewfriends url" class="viewfriends" />viewfriends</a>
<a href="ticketinfo url" class="ticketinfo" />ticketinfo</a>
<a href="ticketgiveaway url" class="ticketgiveaway" />ticketgiveaway</a>
<a href="realityshow url" class="realityshow" />realityshow</a>
<a href="liveinconcert url" class="liveinconcertt" />liveinconcert</a>
<a href="friends url" class="friends" />friends</a>
<a href="comments url" class="comments" />comments</a>
<a href="pictures url" class="pictures" />pictures</a>
<a href="videos url" class="videos" />videos</a>
<div class="table1">
<div class="table2">
<div class="table3">
<div class="table4"><embed allowScriptAccess="never" enableJSURL="false" src="http://lads.myspace.com/videos/vplayer.swf" flashvars="m=1059290204&type=video" type="application/x-shockwave-flash" width="430" height="346" top="976" left="9"></embed>
<div class="table5">
<embed allowScriptAccess="never" enableJSURL="false" src="http://lads.myspace.com/videos/vplayer.swf" flashvars="m=1374175549&type=video" type="application/x-shockwave-flash" width="430" height="346" top="1330" left="9"></embed>
<div class="table6">
</div>
</td>
</tr>

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

Is this all of your html?

if so it looks like first and foremost your missing a load of closing div tags </div> if your css is basically correct... then closing all the divs down properly would be a good start...... try that and let me know what happens

[fairydreamz23]

I figured it out, I just used one of those dumb div layout generators that centered the layout and took the code i needed from that, and here's what i ended up using that worked finally.

.main {
background-color:FFFFFF; color:000000;
background-image:url(http://img120.imageshack.us/img120/7...51sizci5.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachent:scroll;
border:2px solid; border-color:666666;
width:755px; height:636px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-380px; margin-top:150px; text-align:center;
visibility:visible;}

i think it was as simple as just putting the overflow in there.