Grow your CSS skills. Land your dream job.

Embarrassing Layout Problem.

  • # June 9, 2012 at 5:42 am

    I’m using HTML5 boilerplate to create a layout where the header and footer stretch across the page, and content divs are set within a main-container. The problem is that the footer is not set in place at the bottom and I don’t know why, especially as I am using clearfix. Any help?

    jsFiddle

    jsFiddle Full Screen

    # June 9, 2012 at 6:36 am

    well you set every div to height: 200px; so the #main container is only 200px high.

    i have updated ur jsfiddle: http://jsfiddle.net/C77Cj/6/

    and no need to wrap the header and footer with an extra div.

    # June 9, 2012 at 6:46 am

    @Timmey – I knew it would be obvious. Thanks for that

    # June 9, 2012 at 8:19 am

    Sorry I have some more questions.

    What if you want to run a wrapper/container at a width of 1140px (margin: 0 auto;) throughout the page, including the header and footer, so that any content within remains in those dimensions, bearing the side ends of header and footer need to stretch across the page.

    Would I set the wrapper above the header and below the footer to that?

    If so, would I still need another container set in between the header and footer to contain the main content?

    What would be the logic?

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

You must be logged in to reply to this topic.

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