HTML Structure
- Layout
- Content
- Boxes
- Sub Layouts

HTML Structure

This page guides you through the HTML <div> structure from the outside in to give an overview of what you will be styling.

Disclaimer: We believe in minimal markup and lean HTML however for the purposes of this template and to meet CSS coders of different skill levels halfway we have provided a lot of structural markup and CSS hooks to help. The overall effect on pagesize is not too great and is certainly smaller in file size than a table-based layout would be. You will not need to style all of these extra <div>s.

Layout

There are some conventions to get your head around to get you going with your overall layout.

The following image shows you the outlying <div> structure with ids and class names indicated. For the rest of the documentation we will refer to this level of structure as LAYOUT. At this level we have:

#header
#primary
#secondary
#tertiary
#footer

  <body>
    <div id="wrapper">
      <div id="header">
        **CONTENT**
      </div>
      <div id="inner-wrapper">
        <div id="primary" class="primary">
          **CONTENT**
        </div>
        <div id="secondary" class="secondary">
          **CONTENT**
        </div>
        <div id="tertiary" class="tertiary">
          **CONTENT**
        </div>
      </div>
      <div id="footer">
        **CONTENT**
      </div>
    </div>
  </body>

These containers are what you can use to create your columns with. It is recommended not to set any padding or margins on these divs (unless you know what you are doing of course, then it's up to you). Horizontal padding and margin add to the width you set on elements and widths must be accurate when creating CSS layouts.

Content

The second level of layout comes within each of the main layout <div>s (some of which may be useful to you for fluid 2+ column layouts.

This set of <div>s begins right inside the inner-most LAYOUT <div>s. This level of the structure will be called CONTENT because it wraps all the main page content.

  <div class="content">
    <div class="ctl">
      <div class="ctr"></div>
    </div>
    <div class="inner-content">
      **BOXES**
    </div>
    <div class="cbl">
      <div class="cbr"></div>
    </div>
  </div>

The class names .ctl, .ctr, .cbl and .cbr are part of a short-hand notation that you will see variations of as you continue to read. The 'c' stands for CONTENT, while 'tl' stands for 'top left', 'tr' for 'top right', 'bl' for 'bottom left' and 'br' for 'bottom right'. The purpose of these <div>s is to give you an easy mechanism for creating your design. You may want to make a fluid design with rounded corners on the main sections. See the default stylesheet in action for an example of fluid rounded boxes (in this case used on BOXES detailed below).

Boxes

Within CONTENT there is one final level of <div> layout with a few exceptions.

We shall refer to this level of structure as BOXES because this is the construct that surrounds individual sections of the site for example, menus, shopping basket, forms etc… and you may want this extra level of markup to help you achieve your design. As mentioned before see the default stylesheet in action for an example.

NOTE: The outer <div> which has the class name .box will also have an id to indicate what the box contains eg. top-search, product-list, basket, my-details and so on.

  <div class="box">
    <div class="tl">
      <div class="tr"></div>
    </div>
    <div class="inner-box">
      .....
    </div>
    <div class="bl">
      <div class="br"></div>
    </div>
  </div>

You can see a list of all the BOXES and their respective ids on the boxes page which should be your next port of call. This page includes the exceptions mentioned earlier.

Sub Layouts

The following is a list of common patterns you will find within the main content area or within BOXES.

body The page heading, copy and the extras that may be attached.
product-list The product list
basket The baskets use essentially the same HTML because they should be made to look the same.
links The layout of the links sections.

NOTE: Any comments, bug reports, HTML edit requests and support requests for help getting your stylesheet right please register with and use the quickorder support forum.