asked on

absolute DIV positioning

In IE, how can I position a DIV box in the exact center of the browser window, taking into account the height and width of the div box?

callrs

This From: http://murphy.cz/victoria-s-vertical-centering/ Victoria's Vertical Centering

A common problem for contemporary web designers is vertically centering Web pages. The current model of (X)HTML and CSS sees each Web document as a part of an unbounded area and a browser window as a vista within this document, not as a part of it. Hence it is impossible to vertically center a document in any browser window.

But sometimes, one absolutely has to vertically center a page or pages. There are two ways to do this - through combining client-side scripting (e.g. JavaScript) and CSS absolute positioning, or through old-fashioned HTML construction (one-cell table layout).

Or one can use a little bit of special CSS styling to stretch the document to 100 percent of the browser window's height and then vertically center the rest of page. The QuirksMode method can be used for stretching the document. It really is simple; one must only find an (X)HTML element that is, for a browser, the equivalent of its window - the combination of "body" and "html" is enough for all major browsers - and define absolute-positioned nested div's. (Also, one can adjust the characteristics of this div with "overflow", min/max width/height hacks and so on.)

You can test this method on a specially vertically-centered page with this code:

<html>
<head>
<title>Victoria's Vertical Centering - Test Page</title>
<style type="text/css">
html, body { background-color: red; height: 100%; margin: 0; padding: 0;
color: white; text-align: center; }
div#centered { border: 0; background-color: white; height: 50%; width: 50%;
position: absolute; left: 25%; top: 25%; color: black; }
</style>
</head>
<body>
<div id="centered">
Vertically centered div
(<a href="http://murphy.cz/victoria-s-vertical-centering/" title="Victoria's Vertical Centering">see comments</a>).
</div>
</body>
</html>
Benefits: Table-free vertical centering, script-free vertical centering, vertical-centered fluid layouts for special presentations.

Drawbacks: Percent heights, problems with small windows and special devices.

James Rodgers

another option

<html>
<head>
<title></title>
</head>
<body>
<div id="mydiv" style="width:200; height:100; position:absolute;border:2px outset black">
Vertically centered div
</div>
       <script>
       document.getElementById('mydiv').style.left=(screen.availWidth-parseInt(document.getElementById('mydiv').style.width))/2;
       document.getElementById('mydiv').style.top=(screen.availHeight-parseInt(document.getElementById('mydiv').style.height))/2-100;
       </script>
</body>
</html>

but only effective if the window is maximized

SweatCoder

ASKER

I wasn't very clear, and should have emphasized, that the div I need to center is a "floating box" that is only temporarily on top of other content, displaying "Please wait...", with an animated pseudo-progressbar. I already have such a thing, but the positioning technique I used is hardcoded assuming that the browser window is maximized. I had hoped for something a bit more elegant and reusable, so for certain windows that are only half or quarter screen, the div will always pop pretty close to the center of that window.

Having said that, any other ideas?

callrs, I'm unclear whether your proposal will be what I need.

Jester_48, after my latest clarification, will your example work for me? I also need to ensure that the box is on top of everything else and doesn't displace any content. I believe that absolute positioning coupled with z-order will solve this.

Any other thoughts?

MrHorizontal

A DHTML message box for you :)

<html>
      <head>
            <title>Floating Div</title>
            <style type="text/css">

                  body
                  {
                        margin:                   0;
                        padding:                   0;
                        background-color:      #eee;
                  }

                  #msgBox
                  {
                        border:                        1px solid #ccc;
                        background-color:       #fff;
                        position:                   absolute;
                        top:                         0;
                        left:                         0;
                        margin-left:            0;
                        margin-top:                  0;
                        padding:                   10px;
                        width:                        200px;
                        height:                        100px;
                        visibility:                  hidden;
                  }

            </style>
     <script type="text/javascript">

           function showMsgBox(_w,_h)
           {
                 var msgbox = document.getElementById('msgBox');
                 msgbox.style.width = _w;
                 msgbox.style.height = _h;
                 msgbox.style.marginLeft=parseInt((window.innerWidth-_w)/2);
                 msgbox.style.marginTop=parseInt((window.innerHeight-_h)/2);
                 msgbox.style.visibility = 'visible';
           }

           function closeMsgBox()
           {
                 var msgbox = document.getElementById('msgBox');
                 msgbox.style.visibility = 'hidden';
           }

     </script>
</head>
     <body>
       <div id="msgBox">Please wait...<br /><a href="javascript:closeMsgBox();">close</a></div>
           <a href="javascript:showMsgBox(200,100);">show the message box</a>
     </body>
</html>

ASKER CERTIFIED SOLUTION

callrs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SweatCoder

ASKER

MrHorizontal, your example threw a javascript error.