Center that $#!+

When I first learned CSS I kept coming into a problem when trying to center a wrapper. What I was taught to do was to make a div that had left and right margins that were “auto”. this worked just fine, but I always found that there was about a 20px margin above the wrapper. I could never for the life of me figure out why.

After searching the web I discovered a CSS trick. What you can do is make your wrapper div “position” absolute with a “top” of 0px (this makes sure you wrapper is flush to the top). To get it centered you would make your “left” position 50% and a “margin-left” of “-” half of the total width. Your CSS would like like this:

1
2
3
4
5
6
7

#wrapper {
     width:960px;
     position:absolute;
     top:0px;
     left:50%;
     margin-left:-480px;
}

How someone was able to figure this out still boggles my mind. So after using this technique on multiple projects, I discovered it had a flaw. When resizing your window it kind of “disappeared” when the window gets too small. Not a huge deal, but I had a client point it out to me. SO… I decided to find an alternative solution. After poking around a little more on various forums I discovered the “real” solution to eliminating the pesky margin when using “margin:0px auto;”

By default, the HTML and BODY tag contain some sort of padding and or margins so you simply just have to declare them as “0″ and to make sure that they are set to 100% height and width… Like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

html {
     width:100%;
     height:100%;
     margin:0px;
     padding:0px;
}
 
body {
     width:100%;
     height:100%;
     margin:0px;
     padding:0px;
}
 
#wrapper {
     width:960px;
     position:absolute;
     top:0px;
     left:50%;
     margin-left:-480px;
}

So there you go… a much simpler solution to a common issue.

… But wait! There is more! As a separate note, I had also thought that it was impossible to center a wrapper both vertically and horizontally… but by using the technique of negative margins it is possible! By simply applying the 50% to your top and negative margin to the top of the div it will vertically align it… Like so:

1
2
3
4
5
6
7
8
9

#wrapper {
     width:960px;
     height:960px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-480px;
     margin-left:-480px;
}

But what about the container “disappearing” on a window re size? Well there is a solution. Just make an outer wrapper with 100% height and width and a “min-height” and “min-width”. This will force scroll bars to appear once the window gets to a certain size. The completed CSS and HTML looks like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#outerWrapper {
     width:100%;
     height:100%;
     position:relative;
     min-height:960px;
     min-width:960px;
}
 
#wrapper {
     width:960px;
     height:960px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-480px;
     margin-left:-480px;
}

1
2
3
4
5

<div id="outerWrapper">
     <div id="wrapper">
          <!-- CONTENT GOES HERE -->
     </div>
</div>

I hope this helps someone out, or if someone has a better solution, or finds something wrong with what I have hear feel free to leave a comment.