Sub Header

Header Goes Here

Above the first header is room to allow you to re-create the menu if you wanted it to go along the top. Alternatively, you could add Banners (if this was a professional business site banners would be a mainstay of income through Click-throughs to allow companies to know who sent them their way, and to allow them to track purchases to allocate payments to the proper company/individual who sent them business). If you modify this text, you'll notice that the content under it will move up/down correspondingly to keep the pages flow looking right.

The Logo icon actually can extend across the top if needed as well, but in most cases a logo is relatively small. As such, the remaining area will give you room for a banner or menu.

Clearing Method

Because all the columns are floated, this layout uses a clear:both declaration in the footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.

Logo Replacement

An image placeholder was used in this layout in the header where you'll likely want to place a logo. The size of the image is also there for ease of matching.

Web Page Height

As you add, remove content from any one area, you should notice that the main height of the page becomes fluid and allows the page to grow/shrink accordingly with all elements moving to match the new height without error. This is useful when new content will be added, but you don't want to have to force it all into one little space.

However, you'll note that elements on the left/right don't 'color' in to match. They will only fill in the space allocated to them, while the footer will move up/down respectively, always starting below the longest element.