Two Column Layout
The Two Column layout divides content into two equal halves.
Two Column layout is good for any page that needs to be divided in half.
The two column layout can also be inserted into the middle of a form to show the form's elements in an inline display on larger screens.
A single column-half div can be used to wrap all of the content in a page, keeping the content contained in the left half of a page. This is useful when there isn't a lot of content and 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-half class is used along with the inner class.
The inner class creates 1.2em of padding to help separate the columns
Here the column-half class 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.
Here the column-half class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
Here the column-half class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create visual boxes with borders and more padding for visual appeal.
Here is where the columns are cleared.
Here the column-half class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of grey is used for a light grey background
Here the column-half class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create visual boxes with borders and more padding for visual appeal.
A class of shadow is used to create a box shadow.
Here is where the columns are cleared.
Here the column-half class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create boxes with borders and more padding for visual appeal.
A class of info is used to create distinction
Here the column-half class is used along with the inner class for padding between columns.
Additionally the classes of both box and pad are used to create visual boxes with borders and more padding for visual appeal.
A class of info is used to create distinction
Here is where the columns are cleared.
