Two Third Layout
The Two Third Layout divides content into one 66% width block and one 33% width block.
The Three Quarter layout is good for pages that require a small block of content, such as a menu, small instructions section, etc., to be floated to the right or left of the main content.
A single column-two-third div can be used to wrap all of the content in a page, keeping the content contained in the left two thirds of a page. This is useful when it's visually cleaner than stretching that content the width of the screen.
NOTE: columns only apply to normal to wider screen sizes, since columns scale to 100% once the screen size drops to 48em.
Here the column-two-third class is placed on the left, and is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here the column-one-third class is placed on the right, and is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here is where the columns are cleared.
OPTIONAL MENU
Here the column-two-third class is placed on the right, and is used along with the inner class.
The box and pad classes are used to create a border and additional padding.
Here is where the columns are cleared.
OPTIONAL MENU
Here the column-two-third class is placed on the right, and is used along with the inner class.
The box, pad, and shadow classes are used to create a border, additional padding, and box shadow.
Here is where the columns are cleared.
Here the column-two-third class is placed on the left, and is used along with the inner class.
The box, pad, and grey classes are used to create a border, additional padding, and background.
Here the column-one-third class is placed on the right, and is used along with the inner class.
The box, pad, and info classes are used to create a border, additional padding, and distinction.
Here is where the columns are cleared.
