Solved

center wrapper div in the middle of website

Posted on 2010-08-16
13
434 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html fieldset fix its height and width 4 34
Asp in script 6 39
Opening a new tab in IE using Powershell / HTML 2 21
Validating Date Part2 2 8
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

820 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