Grow your CSS skills. Land your dream job.

Centering main-column

  • # February 4, 2013 at 8:55 pm

    I am starting to see why @TheDoc said I was getting ahead of myself. I want to center main-column, here. One would assume that you would simply do this:

    #main-column {
    margin-left: auto ;
    margin-right: auto ;
    }

    But no, that is apparently not going to work in this situation. There is a parent div called page-wrap and it is centering everything in the header just nicely. I have page-wrap closing after the closing body tag. Does this have anything to do with it? Thank you in advance. I need to get the front page looking like it did, but this time I must use the new Starkers v4.0 nude theme. So, a quick fix is in need. Any help will be greatly appreciated.

    Sidenote: Also, why are my styles for my footer not working?

    # February 4, 2013 at 9:02 pm

    @mintertweed,

    > I have `page-wrap` closing after the closing body tag. Does this have anything to do with it?

    That’s not causing the problem, but that’s not right, the page wrap should close before the body closes…your problem is you’re trying to float `#main-column` too, take the float off and you’re set.

    # February 4, 2013 at 9:25 pm

    Thanks. I put page-wrap right after the opening body tag and I closed it right before the closing body tag. I also removed the float: left and it centered everything. Well, everything except the footer, which I still can not figure why it isn’t behaving the way it did on my previous theme. Any thoughts?

    # February 4, 2013 at 9:27 pm

    It’s outside anything that would contain it’s width and set to 100%, the best way to perfectly center the text is just add `text-align:center;` to `#footer` and call it a day.

    # February 4, 2013 at 9:29 pm

    Its not a div with an id of footer though. Removing the # might help, as minter is using an HTML5 footer tag, yeah?

    # February 4, 2013 at 9:33 pm

    footer {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    }

    should do the trick.

    # February 4, 2013 at 9:43 pm

    I figured it out for once. In switching between Chris Coyier’s blank theme from Digging into WordPress to Starkers v4.0 nude theme, I forgot to place two divs in the footer using the styles I had already set up in my stylesheet. Okay! Done! Thanks, @ChrisP.

    Edit: Thanks, @imprintedimaging. Yep, that is exactly what was wrong. I didn’t see your comment until just now.

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".