positioning on 2.0 div not right on different monitors, absolute positioning and other ways not working Options

[shutterleftopen]

http://www.myspace.com/aspectinc

my layout works well and for the most part is lined up on my 22" monitor. on my laptop that is 17" monitor it's off. i'm using absolute positioning along with the left: 18% code but it's not helping. below is the code. any suggestions? thanks in advance.

CODE

.addbutton
{width:100px;height:50px;position:absolute;top:570px;margin-left:140px;background-color:transparent;z-index:9;overflow:hidden;left:18%;}

.msgbutton
{width:100px;height:50px;position:absolute;top:575px;margin-left:250px;background-color:transparent;z-index:9;overflow:hidden;left:18%;}

.sitebutton
{width:100px;height:50px;position:absolute;top:580px;margin-left:360px;background-color:transparent;z-index:9;overflow:hidden; left:18%;}

.picsbutton
{width:290px;height:50px;position:absolute;top:580px;margin-left:580px;background-color:transparent;z-index:9;overflow:hidden;left:18%;}

.emailbutton
{width:120px;height:50px;position:absolute;top:570px;margin-left:880px;background-color:transparent;z-index:9;overflow:hidden;left:18%;}

.aboutmetext
{width:360px;height:330px;position:absolute;top:2270px;margin-left:160px;background-color:transparent;z-index:9;text-align:justify;padding-right:5px;overflow-x:hidden;overflow-y:auto;left:18%;}

.myspace
{width:784px;height:307px;position:absolute;top:713px;margin-left:150px;background-color:transparent;z-index:9;overflow-x:hidden;overflow-y:auto;left:18%;}

.photography
{width:784px;height:419px;position:absolute;top:1110px;margin-left:150px;background-color:transparent;z-index:9;overflow-x:auto;overflow-y:hidden;white-space:nowrap;left:18%;}

.print
{width:784px;height:232px;position:absolute;top:1618px;margin-left:155px;background-color:transparent;z-index:9;overflow-x:hidden;overflow-y:hidden;left:18%;}

.specials
{width:784px;height:231px;position:absolute;top:1942px;margin-left:155px;background-color:transparent;z-index:9;overflow-x:hidden;overflow-y:hidden;left:18%;}

[Mickey]

If you want to use that method, use 50%.

[shutterleftopen]

50% knocks the sections over to the right. i used 18% to keep them in line within the same monitor using different browsers. but it shifts with a different size monitor.

[miguelS]

You don't need to use a margin on the div.

Set contentMid2 to relative positioning.
Then position your content absolute with top and left by pixel.

[Mickey]

50% knocks the sections over to the right. i used 18% to keep them in line within the same monitor using different browsers. but it shifts with a different size monitor.

That's because 18% of your monitor doesn't equal 18% of that other monitor. If you want those sections centred, stick to 50% then adjust the margin-top / margin-left values appropriately.

[shutterleftopen]

You don't need to use a margin on the div.

Set contentMid2 to relative positioning.
Then position your content absolute with top and left by pixel.

If I do this and don't need the % setting on there how would I do the code for each sectio? Just remove the % left part and do the relative positioning for the midcontent? Will that keep it even on all browsers and all monitors. Or should I do the 50% margin and adjust the positions from there. If I do the 50% do I position it from the center of the page?

[Mickey]

I think he means something like this:

CODE

div.contentMid2 {position: relative;}

.addbutton {width:100px; height:50px; position:absolute; top:570px; left:140px; background-color:transparent; z-index:9; overflow:hidden;}

blah blah blah

As in, you won't have to deal with percentages and that. (Correct me if I'm wrong, Miguel.)

[shutterleftopen]

sweet. thanks miguel and mike. worked beautifully and now it's dead-on on any browser and any size monitor.

[Mickey]

Topic closed & moved.