Treehouse: Grow your CSS skills. Land your dream job.

Centering Div and Other Potential Problems

  • # June 29, 2011 at 6:51 pm

    I’m working a redesign for my mom’s site and this is my first time designing with CSS. This is the design that I created:

    These two pages will be includes on the index.html:

    First, the nav page has a horizontal scroll bar unless I use overflow-x: hidden;. I’m not sure why it does this. Second, I wasn’t sure how to center the main div: div#container. I floated it to the left with a left margin. Is there any better way to do this? I feel like the content is centered on the index page, but not on the nav page.

    Also, do you see any other potential problems with the way I coded this?

    Thank you!

    # June 29, 2011 at 7:26 pm

    When turning overflow-x: hidden; off I do not get a horizontal scroll bar unless the width of the page exceeds my browser window (Chrome 12). I assume you are getting a scrollbar no matter how wide your window is?

    Center the main div by using margin: 0 auto; (shorthand for margin: top/bottom left/right). You can change the top and bottom margin’s if you need but by setting the left and right margin’s to auto, it center’s the div on the page.

    Your HTML doesn’t validate and I would highly recommend running your CSS through This should help point out some improvements to your coding such as writing more efficient CSS selectors.

    # June 29, 2011 at 8:32 pm

    the body on the nav page is wide because the social stuff is overflowing its container. I’d put an overflow: hidden; on .socialbox or get a handle on its children. you can then remove the overflow-x: hidden from body

    # June 29, 2011 at 9:03 pm

    @wolfcry911 What browser are you viewing it in? I couldn’t replicate what you are seeing.

    If the ‘social stuff’ is overflowing its container then you need to clear the floats as using overflow: hidden; will just hide any content outside of .socialbox.

    # June 30, 2011 at 12:03 am

    it has nothing to do with clearing floats. the children are over-flowing in width, not height

    # June 30, 2011 at 12:27 am

    I still can’t replicate your results. Can you screenshot it for me?

    I have checked with the Chrome inspector, Firebug and the XRAY bookmarklet and it appears fine to me.

    # July 1, 2011 at 3:54 pm

    Thank you guys so much for the help! The margin: 0 auto; and overflow:hidden on the social bar worked great!!

    I ran the index.html through an html validator and it said it had 21 errors :/. 20 of them were about having duplicate ids, which I changed to class. That leaves one html error at line 275. It says I shouldn’t have a unordered list within an unordered list. Is there any other way to have a sub list?

    As for my CSS I had a lot of warnings come back with no errors on the site you suggested, sl1dr. I don’t understand some of them, such as don’t “use ids in selectors.” I’m not sure what that means. For example, I changed div#container to #container. And it still came back with this message o.O.

    Thank you!


    # July 1, 2011 at 9:37 pm

    @LaurelBrittany I wouldn’t worry about CSS Lint telling you not to style ID’s, as long as everything else was ok.

    # July 1, 2011 at 10:38 pm

    Aa, so they are fussing at me for styling IDs? Thanks for translating that for me XD.
    Thank you for all your help ^.^!!!

    Here is what my mom and I have so far:

    Not sure what’s going on with the footer stopping early. And I need to get the borders on the articles to go down the page. We’re getting closer XD.

    Take care!


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

You must be logged in to reply to this topic.