center wrapper div in the middle of website

i am creating a portfolio website and want a div to be

width: 800px
height: 700px

what i am wanting to do is have the div be centered in the screen on all four sides
no matter what screen resolution someone is using.

this will make the right and left sides the same spacing
and the top and bottom sides the same spacing.

i will then put my info inside the wrapper.

thanks
webdottAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

webdottAuthor Commented:
i came up with this code, it works on the left and right, but not top and bottom
it is located at the top of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>

<body style="background-color: #A7C6A6">
<div align="center" style="margin-bottom:auto; margin-top:auto; margin-left:auto; margin-right:auto; width:800px; height:600px; background-color:#FFFFFF">
				test this out</div>
</body>

</html>

Open in new window

0
sscottiCommented:
See if this helps.


http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Not sure if this works in all browsers.  It is relatively easy to do with tables but this doesn't validate in CSS.

If you use jQuery you might check this out:

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/
0
HagayMandelCommented:
Use the following JavaScript on the body onLoad event:

HTML:

<body onload="centerMe()">

Javascript: (REPLACE "myDiv" WITH YOUR DIV ID!!

<script type="text/javascript" language="javascript">
function getDocumentHeight() {
    var doc = document;
    return Math.max(
        Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
        Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
        Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    );
}
function getDocumentWidth() {
    var doc = document;
    return Math.max(
        Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
        Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
        Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
    );
}
function centerMe() {
// Find page width and height
      pageHeight=getDocumentHeight();
      pageWidth=getDocumentWidth();
//Move the div
      var mydiv = document.getElementById("myDiv");
      mydiv.style.height=300 +'px';//Set your div height
      mydiv.style.width=500+'px'; //Set your div width
      var divWidth = parseInt(mydiv.style.width);
      var divHeight=parseInt(mydiv.style.height);
      var horzSpace=pageWidth-divWidth;
      var vertSpace=pageHeight-divHeight;
      mydiv.style.position = "absolute";
      mydiv.style.marginLeft = horzSpace/2 + 'px';
      mydiv.style.top= vertSpace/2 +'px';
      }
</script>
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

webdottAuthor Commented:
sorry but none of these worked for me.
0
HagayMandelCommented:
It sure does!
Check how you apply the code, and don't forget to replace 'myDiv'  to the ID of your div, IN 2 OCCURRENCES!
0
webdottAuthor Commented:
if you are to shrink the browser window, the div should float to keep it in the middle

this works to at first center it, but it does not allow to keep center when shrinking the browser window.

thanks.
0
webdottAuthor Commented:
i am looking for it do act like this page:

http://www.julikadesign.com/

if you have your browser maximized - it is in the center
if you minimize and adjust your browser - it centers

thanks
0
HagayMandelCommented:
The original question was for a solution to center a div in a screen; The nature of the question indicates that the div is SMALLER than the screen!, and to that you were given a solution!
Now you are asking for solution to RESIZE a div (upon resizing the screen) and to center it in the resized screen, and this is a different question!
For that you need to make a modification of the code above:

HTML:

<body onload="centerMe()" on resize="centerMe()">

Javascript:

Replace the values (%) in the code with your values!

mydiv.style.height=pageHeight*25/100 +'px';//Set your div height to 25% of screen width
mydiv.style.width=pageWidth*45/100+'px'; //Set your div width to 45% of screen width


And
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
webdottAuthor Commented:
sorry for the delay, been out for a while on a bad note.

sorry for the confusion, the original question was meant to be like the website example.

thanks for all your help.
0
HagayMandelCommented:
The div in the linked site, DOES NOT ADJUST to screen size, it remains the same in size!
For achieving that, the first solution is good.
0
HagayMandelCommented:
My first solution.
0
webdottAuthor Commented:
the post has no accept as solution?? is something wrong with ee?
0
webdottAuthor Commented:
thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.