Columns / Grid / Framework - No Left Spacing

Due to popular request, a second column layout has been added to our framework, using an additional CSS class "nogutter". This allows you to layout your site without any space between the containing elements.

In some cases columns have the same width, such as: two_quarter & one_half. The class names have been left in place simply for ease of use, if you prefer to use one method you can, but you can also mix names e.g.

1/4 Column class="one_quarter nogutter first"
1/4 Column class="one_quarter nogutter"
2/4 Column class="two_quarter nogutter"

Is the same as:

1/4 Column class="one_quarter nogutter first"
1/4 Column class="one_quarter nogutter"
1/2 Column class="one_half nogutter"

When using the framework remember that all first containing elements have a multiple class: class="COLUMNNAME nogutter first", the class "first" removes the left margin and clears the float e.g.

1/2 Column class="one_half nogutter first"
1/2 Column class="one_half nogutter"

The same goes for nested elements, the first container element in the main container has to have class="COLUMNNAME nogutter first" e.g.

1/2 Column class="one_half nogutter first"
1/2 Column class="one_half nogutter first"
1/2 Column class="one_half nogutter"

Half Columns

1/2 Column class="one_half nogutter"
1/2 Column class="one_half nogutter"

Third Columns

1/3 Column class="one_third nogutter"
1/3 Column class="one_third nogutter"
1/3 Column class="one_third nogutter"
1/3 Column class="one_third nogutter"
2/3 Column class="two_third nogutter"

Quarter Columns

1/4 Column class="one_quarter nogutter"
1/4 Column class="one_quarter nogutter"
1/4 Column class="one_quarter nogutter"
1/4 Column class="one_quarter nogutter"
1/4 Column class="one_quarter nogutter"
1/4 Column class="one_quarter nogutter"
2/4 Column class="two_quarter nogutter"
1/4 Column class="one_quarter nogutter"
3/4 Column class="three_quarter nogutter"
1/4 Column class="one_quarter nogutter"
2/4 Column class="two_quarter nogutter"
1/4 Column class="one_quarter nogutter"

Fifth Columns

1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
2/5 Column class="two_fifth nogutter"
1/5 Column class="one_fifth nogutter"
1/5 Column class="one_fifth nogutter"
3/5 Column class="three_fifth nogutter"
1/5 Column class="one_fifth nogutter"
4/5 Column class="four_fifth nogutter"
2/5 Column class="two_fifth nogutter"
3/5 Column class="three_fifth nogutter"

Sixth Columns

1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
2/6 Column class="two_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
3/6 Column class="three_sixth nogutter"
1/6 Column class="one_sixth nogutter"
1/6 Column class="one_sixth nogutter"
4/6 Column class="four_sixth nogutter"
1/6 Column class="one_sixth nogutter"
5/6 Column class="five_sixth nogutter"
2/6 Column class="two_sixth nogutter"
1/6 Column class="one_sixth nogutter"
3/6 Column class="three_sixth nogutter"