Creating a boxed design 'sheet' on top of full-width background

Skill Level: Intermediate

Definitions:

  1. Boxed Width - when a site's design has a max width regardless of the width of the browser window. The design is 'boxed in'.
  2. Full-Width - when a design is allowed to stretch the full width of the browser even if it is a very wide design. 

Concept: 

A common design concept is to place a boxed layout over a full-width layout. The idea is the full-width is a stretchable background and the boxed-width is a 'sheet' the content resides on.

How to:

  1. Set site to "Full-Width"
  2. In the template or module add a structural element row and column (done by default)
  3. Set the row background color
  4. Set the column width to desired boxed width (consider 1050px)
  5. Set the column margins to 0, auto, 0, auto
  6. Set float to 'none'
  7. Add a row (and column by default) to the column and insert content elements into it