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
If you want to post code then please use the code tags, that's what they are there for.
You don't need to float your wrapper left and you don't need all those z-indexes. Check your html. Put those last two closing div tags before the body closing tag.
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.
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.
here is my css
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
You don't need to float your wrapper left and you don't need all those z-indexes. Check your html. Put those last two closing div tags before the body closing tag.
Thank you everyone on this post very much.