Alignment help with DIV Overlays, How do you align DIVs to fit every screen resolution? Options

[imalytss]

I submitted a layout, and it got rejected because the alignment on the Reviewer's computer was misaligned. On my screen it looks just fine. How do you align the DIVs to fit every screen resolution? My screen resolution is 1280x1024. Thanks...

[Synoptic-Rewind]

in the past I've used something like this:

CODE

div.content
{position:absolute;
top:90px; left:50%;
margin-left:-320px;}

just adjust the 'margin-left' to adjust the positioning,
lesser numbers would go to the right, higher numbers would go to the left.

[S-Majere]

Synoptic-Rewind is correct; you can use the left and margin-left properties together to create either a container for your DIVs, or a separate positioning for each.

Using an absolute position with the main banner image and a relative position for any further DIVs also helps make alignment static in all browsers, in all resolutions.

[imalytss]

It didn't work. I'm working on another layout, and I tried the code, and it still doesn't work. On my screen it looks fine, but on others it doesn't.

this is the code for the layout.. (Not all the DIVs are added because I didn't want to add them if I couldn't get the alignment right)

HTML

<div class="main">
<img src="http://img301.imageshack.us/img301/5488/overlay10jb3.png">
</div>

<div class="nav">
<span class="span1">Navigate</span>
<a class="custom" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">Home</a>
<a class="custom" href="LINK">Message</a>
<a class="custom" href="LINK">Add</a>
<a class="custom" href="LINK">Block</a>
<a class="custom" href="LINK">Pictures</a>
</div>

<div class="aboutme">
<span class="span1">About me</span>
about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me about me
</div>
<style>

.main{position:absolute;
top:110px; left:47%;
margin-left:-320px;}

.nav{position:absolute; top:135px; left:515px; width:179px; height:164; overflow:auto; margin-left:-120px;}

.aboutme{position:absolute; top:135px; left:712px; width:338px; height:311; overflow:auto; margin-left:-120px;}

a:link,a:active,a:visited{color:FF1D05; font-family:tahoma; border-bottom:1pt solid orange; font-weight:normal; font-size:11px;} a:hover{color:white;}

table,tr,td,div,body,li,p,br{color:808080; font-family:arial; font-size:10px;}

.span1{background-color:transparent; height:17px; text-align:right; background-image:url(); background-repeat:repeat; background-position:left; color:808080; font-family:arial; font-weight:bold; font-size:14pt; text-transform:uppercase; display:block; letter-spacing:-2px; border:none;}

.ftd {Moves the entire profile up - hey hey hey goodbye}
body table {margin-top:-50000px;}

.ftd {Keeps the ad, search form, and navigation links in place}
body td table, body div table {margin-top: 0;}

.ftd {Makes the table the ad, search form and nav links are on transparent}
table, tr, td {background-color:transparent;}

.ftd {Removes the search form}
body div table form{display:none;}

.ftd {For comment boxes to display}
body table div form{display:block;}

.ftd {Hides the dividers in between the nav links}
div table td font {visibility:hidden; }

.navbar {visibility:visible !important;}

table div {display:inline;}
div table div {display:inline;}
.navigationBar {display:none;}
div div select, div div form {display:none !important;}
select { visibility:hidden!important; WIDTH:0px!important;}

textarea,input{border:1pt solid fff; color:white; font-family:century gothic; font-size:7pt; text-transform:uppercase; line-height:90%; background-color:EC6729;}
b{color:EC6729;}
i{font-family:georgia; color:FF1D05;}
u{color:yellow; border-bottom:1pt dashed; border-bottom-color:DBF49B; text-decoration:none;}
hr{border:1pt solid; border-color:DBF49B;}

a.custom:link,a.custom:active,a.custom:visited,{background-color:A1A1A1; border-right-color:red; border-right:7pt; border-right-style:solid; display:block; height:10px; border-left:7pt solid; border-left-color:ffffff; color:white; font-family:century gothic; text-transform:uppercase; font-size:7pt; border-bottom:1pt solid; border-bottom-color:white; line-height:8pt; text-align:right;}

a.custom:hover{background-color:808080; color:cccccc; border-bottom:1pt solid; border-bottom-color:cccccc; text-decoration:none;}

div{font-family:arial; font-size:7pt; line-height:7pt}

table,tr,td,div{height:0px; border:none; padding:0px; background-color:transparent; color:808080;}

.extendednetwork,.userprofiledetail,.userprofileURL,.interestsanddetails,.latest
logentry,.extendednetwork,.friendspace,.friendscomments,.contacttable,.orangetex
15,.whitetext12,.lightbluetext8,.btext,.nametext,.navigationbar,.profileinfo{dis
lay:none;}

.a {hide top search and shortcuts bar}select {position:absolute !important; margin-top:-300px;}
td td td select {position:static !important;}
div table div form {display:none !important}.bodyContent table table div form {display:inline !important;}

table td div div{visibility:hidden;}td div a.text{visibility:hidden;}td div a.links{visibility:hidden;}
tr {background-color:transparent}table div {display:none;}table table div, div table div {display:block;}
</style>
<style type="text/css">BODY,fieldset,textarea,input,a:hover {cursor: url(http://geocities.com/tcniclrpics/peace.ani);}</style><STYLE TYPE="text/css">p,fieldset,textarea,input {align=justify}BODY,a:hover{cursor: url(http://geocities.com/tcniclrpics/peace.ani);}a {cursor: url(http://geocities.com/tcniclrpics/peace.ani);}</STYLE></style>

<style>

body{background-image:url();
background-attachment:fixed;
background-position:center center;
background-repeat:no-repeat;
background-color:D9D9D9;
scrollbar-face-color:D9D9D9;
scrollbar-highlight-color:ffffff;
scrollbar-track-color:D9D9D9;
scrollbar-arrow-color:D9D9D9;
scrollbar-3dlight-color:D9D9D9;
scrollbar-shadow-color:D9D9D9;
scrollbar-darkshadow-color:D9D9D9;
</style>

Help? =/

[MissHygienic]

You have way too many fluffy excessive coding in your DIV layouts. You don't need to add all of that in. . .just make sure you have absolute positioning and left at 50% because that sets your DIV automatically centered in every browser/resolution. Adjust the negative values to your liking once again.

CODE

.main{position:absolute; top:110px; left: 50%; margin-left:-320px;}

.nav{position:absolute; top:135px; left: 50%; width:179px; height:164; overflow:auto; margin-left:-120px;}

.aboutme{position:absolute; top:135px; left:50%; margin-left: -120px; width:338px; height:311; overflow:auto;}

[twodreamlovers]

i actually tried this and it works fine on normal html but when i tried it out for myspace it didn't work.

[imalytss]

It worked for me!
Thanks so much ^_^

[Relentless]

Glad you were helped.

Topic Closed.