Need help centering a div layer in any resolution/screen size.

I'm working on a website (obviously the one implied in my signature), and I'm having a minor but extremely annoying issue. I'm able to center this div layer, see. But on the pages that have a scrollbar, it still centers, but the div layer moves over to the left a bit because of the scrollbar (it chops off ten or so pixels and that space no longer counts as part of the actual page space, which is what the code I'm using needs to work).

This is the css and html I'm working with.

HTML Code:

THE CSS... .container { position: relative; /* make this a containing block! */ border: 1px dotted red; /* mark this element visually prominent */ } .center { position: absolute; /* take element out of the normal page flow! */ top: 10px; /* position the element vertically using top or bottom and define width as you like:*/ width: 50%; left: 0; /* set left and right to the same value! */ right: 0; margin-left: auto; /* adding auto-margins left and right will center the element horizontally!*/ margin-right: auto; background:red; /* mark this element visually prominent */ } - - - NOW THE HTML PART... <div class="container"> <div class="center"> <div class="main"> TEXT WILL BE GOING HERE. </div> </div> </div>

If only the div layers could stay unchanged in position, even if the scrolllbar's there. Thanks... Whoever helps gets a cookie and a big thank-you from me.

You can't do anything about it, except using actual values, which will never work because different people have different resolutions. Why does your website not work with those 10 pixels less?

I think it will works as intended if you change the CSS for .center to

Code:

.center { position: absolute; /* take element out of the normal page flow! */ top: 10px; /* position the element vertically using top or bottom and define width as you like:*/ width: 50%; left: 25%; /* position the elemet 25% to the left, leaving 25% on the right, so the element is centered */ background:red; /* mark this element visually prominent */ }

Quote:

Originally Posted by Marvo

You can't do anything about it, except using actual values, which will never work because different people have different resolutions. Why does your website not work with those 10 pixels less?

It's not that it doesn't work, it's just that the centered element shifts over 10 pixels to the left, because the scrollbar cuts a bit off the size of the internet screen. I like continuity so seeing a page, then clicking another one that shows up a few pixels shifted over, it doesn't look good. :P

khh; I'll try it, thanks.

If it doesn't you can try to force the scrollbar to always be present, and just grayed out when it isn't needed.

Ah, I see what you mean.

Did the scrollbar thing.

And I managed to center the layout, in Firefox and Safari at least. IE is giving me a hard time by putting everything on the left-hand side of the page, though. This is my current code.

HTML Code:

<title> Puffin Art </title> <html> <style type="text/css"> html, body {margin:0px; padding:0px; } body {background-color:black;} body {background-image:url(/Graphics/Logo_Background_2.png); background-repeat:no-repeat; background-position:left top;} #main, .main {font-family:arial; font-size:11.5px; color:#ACACAC; line-height:17px; text-align:justify; padding:20px;} a.two {opacity: .8; filter: alpha(opacity=80); -moz-opacity: .8;} a.two:hover {opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1;} b {color:#00A1F2;} u {text-decoration:none; color:#0488CB; text-transform:uppercase; font-size:9px;} u:hover {text-decoration:none; color:#00A1F2; text-transform:uppercase; font-size:9px;} a:hover, a:link, a:active {color:#00A1F2; text-decoration:none;} #fade, .fade {background-image: url(Graphics/Top_Fade.png); background-repeat: repeat-x; left:-30px; top:-30px;} html { overflow-y: scroll; } .container { position: relative; /* make this a containing block! */ border: none; /* mark this element visually prominent */ } .center { position: absolute; /* take element out of the normal page flow! */ top: -160px; /* position the element vertically using top or bottom and define width as you like:*/ width: 590px; left: 0; /* set left and right to the same value! */ right: 0; margin-left: auto; /* adding auto-margins left and right will center the element horizontally!*/ margin-right: auto; background:none; /* mark this element visually prominent */ } </style> <div class="fade" style="z-index:-10; top:0px; left:0px; height:227px;"></div> <div style="position:absolute; left:25px; top:25px;"><a class="two" href="/index2.htm"><img src="/Graphics/Logo_Corner.png" border=0></a></div> <div class="container" style="z-index:0;"> <div class="center"> <div class="main"> <center> <a class="two" href="/index2.htm"><img src="/Graphics/Link_Home.png" border=0></a>      <a class="two" href="/gallery.htm"><img src="/Graphics/Link_Gallery.png" border=0></a>      <a class="two" href="/buy.htm"><img src="/Graphics/Link_Buy.png" border=0></a>      <a class="two" href="/about.htm"><img src="/Graphics/Link_About.png" border=0></a>      <a class="two" href="/news.htm"><img src="/Graphics/Link_News.png" border=0></a> </center> <p> <br> <br> <center> Welcome to <b>Puffin Art</b>.<br> <u>Requires javascript | Works best in Firefox</u><p> </center> </div> </div> </div> </html>

And here's a screenshot.

Spoiler for big picture:

http://i51.tinypic.com/4u9raw.jpg

Any quick fixes? I'd like to maximize compatability.

First things first: fix that HTML. Your coding is, quite frankly, horrific. Download Notepad++ and head over to W3Schools.com. Every HTML page should have a DOCTYPE declaration and the proper structure. Stylesheets should be external, if at all possible.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Conforming XHTML 1.0 Strict Template</title>  </head> <body>  </body> </html>

Get your HTML sorted, then I'll be glad to help you with the CSS.