Basic Full-width Page Layout

An illustration of the full-width page framework

The Basic Page Layout for the Full-width framework consists of 5 pieces

  • body
  • #header_area
    • .page
      • .menu
      • #header
  • #content_area
    • .page
      • #content_box
  • #footer_area
    • .page
      • #footer

The CSS

body
{
    font-size: 62.5%; /* comes from style.css*/
    color: #111;/* from layout.css [Design Options] */
    background: #fff;/* from layout.css [Design Options] */
}

*
{
    padding: 0; /* comes from style.css*/
    margin: 0; /* comes from style.css*/
}

.full_width
{
    width: 100%; /* comes from layout.css*/
    clear: both; /* comes from layout.css*/
}
.full_width .page
{
    width: 94.7em; /* comes from layout.css*/
    margin: 0 auto; /* comes from layout.css*/
    padding-right: 2.2em; /* from layout.css [Design Options] */
    padding-left: 2.2em; /* from layout.css [Design Options] */
}
#header_area .page
{
    padding-top: 2.2em; /* from layout.css [Design Options] */
}
#footer_area .page
{
    padding-bottom: 2.2em;  /* from layout.css [Design Options] */
}
.full_width #content_box .page
{
    margin: 0 2.2em 0 1.1em;/* comes from layout.css*/
    width: auto;/* comes from layout.css*/
}

}

Notes:

body
Notice that both color & background are given in the Thesis Design Options dialog.

.full_width
The class .full_width is applied to each of the #header_area, #content_area and #footer_area.

.page
.page is contained within each of the #header_area, #content_area and #footer_area as well. The width property is determined and assigned programaticlly when you select your column configuration and give the columns widths in the Thesis Design Options >Page Layout >Columns dialog.

Notice that the margin of .page is set to zero. For the purposes of giving a visual illustration I set the margin to 20px so that the .page would be visible. Otherwise the .page is the same size as the #header, #content_box and #footer. Padding is applied to it in various places to give the give the “border” around the page.

#header_area
#header_area expands left to right to fill the browser window.

#content_area
#content_area expands left to right to fill the browser window and is immediately below #header_area.

#footer_area
#footer_area expands left to right to fill the browser window and is immediately below #content_area.

{ 0 comments… add one now }

Leave a Comment