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.