How Do I Center a Wrapper, I feel I’ve tried everything.

[chris]

I am working on a new WordPress Theme and I am having trouble. I can center the content with margin: auto but I need to float the wrapper to be able to have all of the contents (sidebar, header, footer, content) w/in the wrapper. I have tried a lot of techniques including margin: 0 , auto ; margin: auto (left and right), and even center the wrapper text align. None of these get desired results. I want the wrapper centered in the middle of the page. My test site is at http://www.chriscarvergraphics.com/blog

here is my css

Code:

body {
background-image:url(/images/htmlbground.jpg);
padding: 0;
margin: 0;
width: 100%;
display: table;
background-repeat: no-repeat;
background-position: center top;
}
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE’s blue borders */
/* Page Layout */
#page-wrap {
width: 824px;
height: auto !imortant;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-position: center;
background-image:url(/images/notebook_paper.png);
z-index: 0;
float: left;
margin: 0 auto;
}
#header {
height: 110px;
width: 758px;
float: left;
background-image:url(/images/header_background.png);
background-repeat: no-repeat;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 45px;
padding-left: 36px;
z-index: 1;
font-family: “Courier New”, Courier, monospace;
font-size: 16pt;
font-weight: bold;
color: #999999;
}
.post {
width: 550px;
z-index: 3;
float: left;
}
#sidebar {
float: left;
width: 207px;
z-index: 3;
margin-right: 10px;
}
#sidebarTop {
background-image:url(/images/note-bg-top.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 138px;
padding-left: 15px;
}
#sidebarMid {
background-image:url(/images/note-bg.png);
float: left;
width: 207px;
background-repeat: repeat-y;
background-position: center center;
padding-left: 15px;
}
#sidebarBottom {
background-image:url(/images/note-bg-bottom.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 30px;
padding-left: 15px;
}
#adbar {
float: left;
width: 207px;
z-index: 3;
margin-right: 10px;
}
#adbarTop {
background-image:url(/images/note-bg-top.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 138px;
padding-left: 15px;
}
#adbarMid {
background-image:url(/images/note-bg.png);
float: left;
width: 207px;
background-repeat: repeat-y;
background-position: center center;
padding-left: 15px;
}
#adbarBottom {
background-image:url(/images/note-bg-bottom.png);
float: left;
width: 207px;
background-repeat: no-repeat;
background-position: center top;
height: 30px;
padding-left: 15px;
}
#footer {
height: 110px;
width: 758px;
float: left;
background-image:url(/images/footerbg.png);
background-repeat: no-repeat;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 45px;
padding-left: 36px;
z-index: 1;
font-family: “Courier New”, Courier, monospace;
font-weight: bold;
color: #999999;
}
/* Menu Bar */
#menu-bar li {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
font-size: 9pt;
}
#menu-bar a {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#menu-bar a:active {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#menu-bar a:hover {
background-image:url(/images/alink.png);
display: inline;
list-style: none;
margin: 0;
padding-top: 0em;
float: left;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-repeat: no-repeat;
background-position: center center;
height: 28px;
width: 75px;
margin-top: 50;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.post a {
color: #333333;
}
#page-wrap p {
padding-right: 5px;
padding-left: 5px;
}
.post a {
background-image:url(/images/linkbox.png);
color: #000000;
background-repeat: repeat-x;
background-position: center bottom;
height: 17px;
text-decoration: none;
background-color: #f9ed2b;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
}
.post a:hover {
color: #666666;
background-repeat: repeat-x;
background-position: center bottom;
height: 17px;
text-decoration: none;
background-color: #f9ed2b;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}

Any help would be greatly appreciated. Thank you
-Chris

[Chris Coyier]

Yeah the float is killing you. I don’t think you need it. Remove that and throw like overflow: hidden on it so it clears the internal floats (so it has a proper height and you can see the background.

[Rob MacKay]

like apostrophe said – you have some crazy ideas going on in your CSS lol make that map image the background of your html tag and not your body tag…

[chris]

Whenever I remove that float on the Wrapper Div, My background Image "notebook paper" disapears. I don’t know why. I guess this is the real issue.

[chris]

WOW! Chris Coyier You are a CSS Genius! I just removed the float and added the overflow hidden rule and it worked thank you very much. I’m looking forward to your book release.
Thank you everyone on this post very much.

[Author]

Posts