Solved

center wrapper div in the middle of website

Posted on 2010-08-16
13
436 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:webdott
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
13 Comments
 

Author Comment

by:webdott
ID: 33451233
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
 
LVL 5

Expert Comment

by:sscotti
ID: 33451299
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33452533
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:webdott
ID: 33492484
sorry but none of these worked for me.
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33492775
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
 

Author Comment

by:webdott
ID: 33494093
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
 

Author Comment

by:webdott
ID: 33494096
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
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 33494253
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
 

Author Comment

by:webdott
ID: 33550947
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33551811
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33551816
My first solution.
0
 

Author Comment

by:webdott
ID: 33607859
the post has no accept as solution?? is something wrong with ee?
0
 

Author Closing Comment

by:webdott
ID: 33628021
thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to dynamically set the form action using jQuery.

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question