Using Columns within the Body

Posted on Mar 12, 2015 in Content

Grid Size

The website is designed on top of a 12 column responsive grid system. In the past, people would resort to using tables to layout design elements on a web page. However, that method does not comply with Section 508 standards. Section 508 standards recommend that you use CSS to layout web pages. The grid system is designed to provide a structured CSS solution to creating columns.

Page notes:

  • A full width page gives you all 12 columns to work with in the body of the page/post.
  • A default page that utilizes a sidebar gives you 8 columns to work with. The sidebar area will utilize the other 4 available columns.

To use the grid, you must have some knowledge in HTML. All of the edits for the grid markup must be made in the Text tab of the editor, and not the Visual editor screen.

The HTML for a two-column layout will look something like this:

<div class=”six-col”>
Content goes here.
</div>
<div class=”six-col last-col”>
Content goes here.
</div>

The class will pertain to the amount of columns you want the <div> element to span. The last <div> element must have a class last-col.

You can combine any combination of column widths, as long as they add up to 12.

Two Columns

class=”six-col”

1 of 2
2 of 2

Three Columns

class=”four-col”

1 of 3
2 of 3
3 of 3

FourColumns

class=”three-col”

1 of 4
2 0f 4
3 of 4
4 of 4

Six Columns

class=”two-col”

1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6

Twelve Columns

class=”one-col”

1 of 12
2 of 12
3 of 12
4 of 12
5 of 12
6 of 12
7 of 12
8 of 12
9 of 12
10 of 12
11 of 12
12 of 12