We are currently

View our business hours

CSS Guide - 1. Layout


Section 1: Layout

Return to table of contents

This section starts with the outermost selectors, and work inwards.
For each level, it starts with the top of the page and works downward.
Use the body selector to make global changes to page styles.
There will usually be classes on the body tag that allow you to select a particular page. For example: body.not-frontwill select the body tag for all pages except the front page. Take a look at the page source to see what classes are available for that page. Note that changes made on the body tag will also affect the user toolbar.

body {

#page {
note: this is the centered container that holds the page

#page-wrapper {
border: 1px solid black;
note: an example code of how to use borders on the page


1.1 Wrappers

There are wrappers for each container. All wrappers have the 'wrapper' class. Each one contains a div.container_12 which is used to create the grid-based layout (960.gs)

.wrapper {

#header-top-wrapper {

#navigation-wrapper {

#header-bottom-wrapper {

#main-wrapper {
note: the main-wrapper contains the content regions and sidebars

#footer-wrapper {

#disclaimer-wrapper {

1.2 Containers

There are containers for holding all of the visible regions. All the containers only contain 1 region, except #main-container

.container {

#header-top-container {

#navigation-container {

#header-bottom-container {

#main-container {
note: the main-container contains the content regions and sidebars

#footer-container {

#disclaimer-container {

1.3 Grid-based divs

Inside the containers are the grid-based divs that create the layout. Each of these contain 1 region.

12 Grids:

#header-top {

#navigation {


#footer {

#disclaimer {

Page Content

div#main contains 3 regions plus the page content; it is between the left and right sidebars.

12 grids (without sidebar)
9 grids (with 1 sidebar)
6 grids (with 2 sidebars)

#main #content {

#sidebar-first {
note: left sidebar, 3 grids, collapses when codepty

#sidebar-second {
note: right sidebar, 3 grids, collapses when codepty

1.4 Regions

Regions are used for organizing and arranging blocks. Inside each region are the blocks which Drupal has generated for the page. Be aware that some blocks may be using the grid classes. If a region contains no blocks on a particular page, that region will not be created.
Regions each have a class stating how many blocks are in that region. e.g. A region with two blocks will have the class "blocks-in-region-2"
Regions are listed in the order that they appear in HTML.

.region {

.region-header-top {

.region-navigation {

.region-header-bottom {
note: Header Top, Navigation, Header Bottom Regions are full width (12 grids). Separating the header into 3 regions - this has been done to allow greater flexibility in the coding

.region-highlight {
-this region is placed above the page title and breadcrumb

.region-content-top {
-placed below page title, tabs, and helptext; above page content

.region-content-bottom {
-placed below page content

note: Highlight, Content Top, Content Bottom Regions are inside div#main which means they have variable width (6, 9, or 12 grids)

Sidebar First, Sidebar Second regions are 3 grids wide when they contain blocks, or 0 when they do not.

.region-sidebar-first {
-placed on the left side of content

.region-sidebar-second {
-placed on the right side of content

.region-footer {
A sample websie which uses wrappers, containers, grid based divs and regions. Specifically, this example displays header-top area. The same structure applies to header-bottom, main, footer etc.

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request


Powered by Zendesk