Skill Level: Intermediate
Definitions:
- Boxed Width - when a site's design has a max width regardless of the width of the browser window. The design is 'boxed in'.
- 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:
- Set site to "Full-Width"
- In the template or module add a structural element row and column (done by default)
- Set the row background color
- Set the column width to desired boxed width (consider 1050px)
- Set the column margins to 0, auto, 0, auto
- Set float to 'none'
- Add a row (and column by default) to the column and insert content elements into it