Grow your CSS skills. Land your dream job.

Wrapper Issue

  • # June 9, 2012 at 9:52 am

    How would I get the wrapper to run through the whole page (including header and footer) to contain content at a fixed width but without disturbing the existing layout of the header and footer?

    Jsfiddle

    Jsfiddle Full Page

    # June 9, 2012 at 10:03 am

    It looks like you have the layout you are after.

    The header and footer span the whole page and your content area is centered and has a max-width.

    I don’t understand your problem.

    # June 9, 2012 at 10:38 am

    @Paulie_D

    Yep, the layout is right. The issue is whether I need to have a wrapper that runs through the whole page to support content in the header and the footer so it matches the dimensions of the main content.

    Does that make sense?

    # June 9, 2012 at 11:07 am

    If you look at Josh Hibbert’s site, he has a wrapper that runs through the whole page, and does so before the header begins.

    # June 9, 2012 at 12:18 pm

    I think I get it. The content of the header and footer is also going to be limited to 1140 or so, is that it?

    In that case, no…and yes. You don’t wrap everything just add divs inside the header-container and footer-container, limit them to the specified width and center them. That way your header-container and footer-container become…erm, containers. :)

    Like I did with the header here: http://jsfiddle.net/Paulie_D/nLHs8/2/embedded/result/

    # June 9, 2012 at 1:13 pm

    @Paulie_D Yea, that makes sense making nested containers. For some reason, I get obsessed by trying to fit everything within the least amount of containers as possible.

    Thanks a lot. Sometimes I feel confused by what appears to be simple issues.

    # June 11, 2012 at 7:07 pm

    @tobeeornot Realistically, I should have used the body element for that wrapper.

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