Grow your CSS skills. Land your dream job.

Centering Content

  • # January 5, 2012 at 1:04 am

    I’m using a simple conditional to show sidebar only if the URL contains certain word. However, when the sidebar is gone, I want the content to be placed in the center. I’m using the following in my PHP. I originally thought margin: X auto; should do the trick, but it didn’t. I also tried to remove ‘float:left;’, but the content is still coming from the left side.


    echo '';

    Angela

    # January 5, 2012 at 1:08 am

    Tough to say without looking at a live link.

    # January 5, 2012 at 5:52 am

    I probably can’t provide a live link, but here are all the CSS related to #primaryContent selector, which is designed to hold all the output for the main column.


    #primaryContent {
    clear:both;
    float: left;
    margin: 70px 40px 0 0;
    padding: 0 15px;
    width: 680px;
    }
    body.home #primaryContent {
    clear:both;
    float: left;
    margin: 30px 0 0 0;
    padding: 0 15px;
    width: 960px;
    }
    #primaryContent h1,
    #primaryContent h2 {
    margin: 10px 0 0;
    padding: 0;
    }
    body.page-id-2 h1.postTitle,
    body.page-id-2 h2.postTitle,
    body.home h1.postTitle a,
    body.home h2.postTitle a {
    display: none;
    }
    #primaryContent h1.postTitle,
    #primaryContent h2.postTitle {
    font-size: 22px;
    margin: 0 0 20px;
    padding:10px 0;
    text-align:center;
    }
    #primaryContent h1.postTitle a,
    #primaryContent h2.postTitle a {
    background:#0097a5 url(images/title-bg.gif) repeat 0 0;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
    color:#fff;
    font-size:24px;
    font-weight:normal;
    line-height:1.5em;
    padding:10px 15px;
    text-shadow:-1px -1px #333;
    text-transform:uppercase;
    }
    #primaryContent h1.postTitle a:hover,
    #primaryContent h2.postTitle a:hover,
    #primaryContent .sticky h2.postTitle a:hover {
    background:#CC4D22 url(images/title-bg-over.gif) repeat 0 0;
    text-decoration: none;
    }
    #primaryContent h3 {
    margin: 10px 0 0;
    padding: 0;
    }
    #primaryContent p.date {
    background: url("images/border.gif") repeat-x scroll left center transparent;
    color:#666;
    font-size: 14px;
    margin:10px 0 20px;
    text-align:center;
    }
    #primaryContent p.date small {
    background:url("images/bg-paper.jpg") repeat scroll 0 0 transparent;
    color:#666;
    font-size:14px;
    padding:0 10px;
    }
    #primaryContent .sticky h2.postTitle a {
    background: url(images/title-bg-sticky.gif) repeat scroll 0 0 #910f0f;
    }
    #primaryContent .sticky p.date,
    #primaryContent .sticky p.date small {
    background:none;
    }
    #primaryContent .error-page h2 {
    font: 3em/2em 'Lobster',Georgia,"Times New Roman",Times,serif;
    text-align:center;
    }
    #primaryContent .error-page h2 span {
    color:#CC4D22;
    font-size:2.2em;
    }

    @media (max-width: 1024px) {
    #canvas {
    padding:40px;
    width: auto;
    }
    #primaryContent {
    width: 65%;
    }

    Most of these are pretty irrelevant except the first 2.

    # January 5, 2012 at 9:32 am

    dont know if its that what you mean:

    http://jsfiddle.net/BLwgJ/196/

    # January 5, 2012 at 12:19 pm

    Wouldn’t it be easier to use the same conditional statement being used to add the sidebar to add a class to the content div you’re trying to center? That way you can just control the styles via stylesheet and you don’t have to echo echo out a style tag on the page.

    # January 6, 2012 at 7:35 am

    hi timmey, I know I’m asking to centering stuff, but I’m looking to center the “content” box, not the text in there. And for noahgelman, it would be a great habit to form (which is not something I have a lot), but that doesn’t really solve the issue I have right now.

    Angela

    # January 6, 2012 at 9:13 am

    well, both divs are centered, or i still dont get it :)

    # January 6, 2012 at 9:14 am

    oh, sorry I missed that. Guess small windows are bad things, sometimes. Thanks a lot.

    Edit: Just tried to use ‘position: relative;’ instead of ‘float: left;’, didn’t work. Removing ‘float: left;’ didn’t work either. Bummer. But it wasn’t too much of a big deal. Guess I will just let it go.

    Angela

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

You must be logged in to reply to this topic.

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