Centering a 'wrapper' area problems

Forum Moderators: not2easy

Message Too Old, No Replies

Centering a 'wrapper' area problems

rh203

2:15 pm on May 31, 2009 (gmt 0)

Hi, i'm new to CSS and web design. All I want to do is center a wrapper of 750px in width against the blue body background in order to fill it with content. I have tried all manner of methods and I'm fairly certain that my code is fine...please can someone help pick out why the white box always remains to the left of the page when I have set the margins as auto for both left and right. Thanks very much, Ryan :)

(The <div id="wrapper"> </div> tag is present in the body of the html code)

body{
font-family: Ariel;
background-color: #69C0ED;
color: #FFFFFF
padding: 0;
margin:0;

}

#wrapper{
position: fixed;
width: 750px;
height: 100%;
background-color: #FFFFFF;
left: auto;
right: auto;
top: auto;
bottom: auto;

}

swa66

3:53 pm on May 31, 2009 (gmt 0)

Assume you're not looking at it in a legacy IE browser and/or don;t trigger IE6's quirks mode.

Loose the position:fixed.

Next get your height:100% working properly: it sets the height of the element to the height of the parent provided the direct parent has an explicitly set height different from auto.
In general it's smart to set the min-height of the innermost element instead of setting it's height (you'll notice when you add more content than the viewport it long).

e.g.:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>untitled</title>
  <style type="text/css">
   * {
    margin:0;
    padding:0;
   }
   html {
    background-color: #FFFFFF;
    height: 100%;
   }
   body {
    background-color: #69C0ED;
    min-height: 100%;
    width: 750px;
    margin: 0 auto;
    color: #fff; 
    font-family: Arial, Helvetica, sans-serif;
   }
  </style>
<!--[if IE 6]>
  <style type="text/css">
   body {
    height: 100%; /* for for IE6's lack of support on min-height */
   }
  </style>
<![endif]-->
 </head>
 <body>
  <p>hello world</p> 
 </body>
</html>

There's no need to have the wrapper as long as you keep IE6 out of quirks mode, but if you want one, it can be done there just the same (just leave the 100% height on html).

rh203

8:35 am on Jun 1, 2009 (gmt 0)

hi, I have tried all of this, yet still nothing will center in the browser window. Getting very frustrated with it now :(

swa66

11:14 am on Jun 1, 2009 (gmt 0)

The code I posted above does work AFAIK.

Things that make it fail in e.g. IE6 is having it in quirks mode (easy to trigger: make sure to have a full doctype with nothing in front of it).

BTW: don't develop code in IE, just fix issues after it's done.

laurieballard

1:11 pm on Jun 1, 2009 (gmt 0)

Try adding

* {
padding:0;
margin:0;
border:0;
}

Top the top of your CSS and

margin: auto;

To your #wrapper tag

superds

4:46 pm on Jun 1, 2009 (gmt 0)

You should use margin:0 auto; for #wrapper e.g

#wrapper
{
margin:0 auto;
width:780px;
}