Grow your CSS skills. Land your dream job.

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

  • # April 1, 2009 at 12:41 pm

    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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/images/notebook_paper.png);
    z-index: 0;
    float: left;
    margin: 0 auto;
    }
    #header {
    height: 110px;
    width: 758px;
    float: left;
    background-image:url(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/images/note-bg.png);
    float: left;
    width: 207px;
    background-repeat: repeat-y;
    background-position: center center;
    padding-left: 15px;
    }
    #sidebarBottom {
    background-image:url(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/images/note-bg.png);
    float: left;
    width: 207px;
    background-repeat: repeat-y;
    background-position: center center;
    padding-left: 15px;
    }
    #adbarBottom {
    background-image:url(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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(http://cdn.css-tricks.com/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

    # April 1, 2009 at 1:24 pm

    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.

    # April 1, 2009 at 1:27 pm

    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
    # April 1, 2009 at 1:30 pm

    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…

    # April 1, 2009 at 10:23 pm

    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.

    # April 1, 2009 at 10:43 pm
    Quote:
    Check your html. Put those last two closing div tags before the body closing tag.
    # April 2, 2009 at 8:43 am

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".