Name or Logo

KicKER or motto


How to use this document

Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the responsive layouts. You can remove these comments before you launch your site.

Semantic Elements

This layout uses HTML5 semantic elements such as article, section, aside, header and footer. Content should be divided into distinct groupings and subgroupings and then contained within the appropriate element with headings, as necessary.

Clearing Method

This layout uses a clear:both declaration in the footer rule and the sidebar 2 rule in the various media queries. This "clearing" technique forces the .container to understand where the columns end to show, in their entirety, any borders or background colors you place on these elements. The .container is set to a height of 100% with a bottom margin of -3 ems. These two settings push the footer to the bottom of the browser window regardless of how much content is added to the .container.

Logo Replacement

A text placeholder was used in this layout in the header where you'll likely want to place your company name or logo. It is recommended that you remove the placeholder and replace it with your own company name or logo. Images can be inserted into the header itself but background images applied by CSS are more flexible.