Solved

center wrapper div in the middle of website

Posted on 2010-08-16
13
433 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
  • 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 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