Hey all, I'm making a new layout for my site and it looks fine in 800 X 600 because its absolute positioned. But alas, in higher resolutions the divs go all other the place. :hehe: I forget how to get the divs to stay wrapped together and in the center of the page no matter what resolution someone is using to view it...can someone help please? :)

Remove any positioning...
Add text-align: center; to the body CSS section.
Add margin: 0 auto; to the divs etc on the page.

If you have two divs on one line, put them both in one container div with the above margin code. Then to the div you want on the left add float: left;

ooo, actually I've just realized that if I leave the absolute positioning, and just tweak my header a bit...the layout stretches perfectly to scale in any resolution :) I like that...this way it isnt small on high resolutions. :D

eh...I just tried what you said kittycat...and I think I did it wrong....here is my style sheet, unedited....

A:link
{ text-decoration: none; color: #333399; }
A:visited
{ text-decoration: none; color: #333399; }
A:active
{ text-decoration: none; color: #DD6900; }
A:hover
{ text-decoration: underline; color: orange; }

p {
font-family: Arial, Verdana, sans-serif;
font-size: 9pt;
font-color: black;
}

p2 {
font-family: Arial, Verdana, sans-serif;
font-size: 8pt;
font-color: black;
}

body
{ background-image: url(http://www.knowledgerocker.lifelesspeople.com/kr/images/bgtiedye_3.jpg );
background-attachment: fixed;
padding-left: 0;
padding-right: 0;
text-align: center;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
}
#header {
margin-left: 50px;
margin-right: 50px;
height: 100px;
width: 700px;
text-align: center;
border: 1px solid #000000;
}
#left {
position: absolute;
left: 50px;
top: 150px;
padding: 10px;
width: 150px;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
border: 1px solid #000000;
}
#center {
position: absolute;
top: 150px;
left: 250px;
right: 250px;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
text-align: justify;
}
#right {
position: absolute;
right: 50px;
top: 150px;
padding: 10px;
width: 150px;;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
border: 1px solid #000000;
}

eh...I just tried what you said kittycat...and I think I did it wrong....here is my style sheet, unedited....
unedited before or after trying what she said?

unedited before or after trying what she said?
before. :)

Well, if I read correctly what kittycat said... then this is what your style sheet SHOULD look like after you do what she said... take out the red and add the blue. and what is p2? i have never seen that tag before....
A:link
{ text-decoration: none; color: #333399; }
A:visited
{ text-decoration: none; color: #333399; }
A:active
{ text-decoration: none; color: #DD6900; }
A:hover
{ text-decoration: underline; color: orange; }

p {
font-family: Arial, Verdana, sans-serif;
font-size: 9pt;
font-color: black;
}

p2 {
font-family: Arial, Verdana, sans-serif;
font-size: 8pt;
font-color: black;
}

body
{ background-image: url(http://www.knowledgerocker.lifel e.../bgtiedye_3.jpg (http://www.knowledgerocker.lifelesspeople.com/kr/images/bgtiedye_3.jpg) );
background-attachment: fixed;
padding-left: 0;
padding-right: 0;
text-align: center;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
}
#header {
margin-left: 50px;
margin-right: 50px;
height: 100px;
width: 700px;
text-align: center;
border: 1px solid #000000;
margin: 0 auto;
}
#left {
position: absolute;
left: 50px;
top: 150px;
margin: 0 auto;
padding: 10px;
width: 150px;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
border: 1px solid #000000;
}
#center {
position: absolute;
top: 150px;
left: 250px;
margin: 0 auto;
right: 250px;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
text-align: justify;
}
#right {
position: absolute;
right: 50px;
top: 150px;
margin: 0 auto;
padding: 10px;
width: 150px;;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
border: 1px solid #000000;
}

Yeah I tried doing that and it didnt work. P2 is just what I use for a really small text. I hardly ever use it.

is this the style sheet for your current layout? i use 1924 x 768 and your site looks fine to me. everything is centered. but, the reason why your divs move is cause you have the right one positioned from the right:

#right {
position: absolute;
right: 50px;
top: 150px;
padding: 10px;
width: 150px;;
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
border: 1px solid #000000;
}

so it will always be 50px from the right...

No, not for the current site. I'm in the process of making a new layout. ;) (shhh, its a suprise :D)

ok, well, that's why your div moves in a higher resolution... i made my site in a simple table and centered the table... that way it will always be centered.

well if I do to the style sheet what you posted...it centers all the divs...lol but on top of each other....I'm not sure about the container div kittycat was talking about....thats what I need to fix it how i want it...

then make a div called #container and make sure you have margin: 0 auto; in the stylesheet for #container and then in the #left part of your style sheet, add float: left;

/me has tried that. Lol, its okay a friend is introducing me to tables...they seem easier to work with. :) Thanks for the help though. (IM me and i'll let ya see the layout in progress ;) )