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

**Puffin** · 08-31-2010 05:44 AM

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.

**Marvo** · 08-31-2010 12:23 PM

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?

**khh** · 08-31-2010 03:06 PM

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 */
}

**Puffin** · 08-31-2010 03:24 PM

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.

khh; I'll try it, thanks.

**khh** · 08-31-2010 03:34 PM

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

**Marvo** · 08-31-2010 03:35 PM

Ah, I see what you mean.

**Puffin** · 09-04-2010 05:17 AM

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="two" href="/gallery.htm"><img src="/Graphics/Link_Gallery.png" border=0></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="two" href="/buy.htm"><img src="/Graphics/Link_Buy.png" border=0></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="two" href="/about.htm"><img src="/Graphics/Link_About.png" border=0></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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:

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

**Man of Steel** · 09-23-2010 01:39 AM

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>

<!-- Link to stylesheets and scripts from within the head of your page. -->

</head>

<body>

<!-- Any divs and content goes here. -->

</body>
</html>

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