Embarrassing Layout Problem.

[tobeeornot]

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

[timmey]

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.

[tobeeornot]

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

[tobeeornot]

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?

[Author]

Posts