A column element splits the webpage into different sections so that you can have, for example, pictures on one side, and text on the other. It does this by creating a number of different divs, assigning widths and floating them beside each other.
Standard (old) columns
The original Easysite columns split any area into two columns with configurable widths. They could be nested indefinitely to create multiple columns.
Below you can see some html for standard columns. The first line "element-columns-alpha-outer" wraps around both columns, and refers to the flavour of columns selected. Page editors can choose from Alpha, Beta or Gamma, and each of these top level classes can be used to style columns differently (ie, with differing amounts of padding, or with background images).
The divs “element-column-left-alpha-outer” and “element-column-right-alpha-outer“ are the outermost containers for each column. They contain inline css which floats the columns and assigns widths.
Keen eyed readers will note that the widths 66% and 32% do not add up to 100%! This is because old columns have an automatic 2% gap added in the middle - to help the layout and readability. In the page config the column split is set to 67%.
These inline values can be overwritten if required using !important, though this method should always be used sparingly and with due consideration to how it will impact content site-wide.
Remember to avoid adding borders or padding to the same div as the width. 100% width + 10px padding adds up to over 100% width, and can result in layout issues and cross browser inconsistency!
Multiple (new) columns
With multi-columns you can split an area between one* to six columns. The configuration features a useful slider, which allows you to easily adjust the column widths. Each column will have a uniquely identifiable name, using the Greek Alphabet.
Multiple columns do not include the automatic 2% gap like standard columns do. If required, this must be added by CSS.
With multi-columns you get style options running the full length of the Greek alphabet (from Alpha to Omega), in case you want to have dozens of different column styles!
* if using just one column, then this essentially functions as a floated panel.
CSS styling columns
Firstly we can give the columns a background colour by selecting the outermost div of each column and adding some css.
Next we can add some padding, so that the text isn’t crammed up against the edges of the columns. Remember to add this to a different div to the width.
These changes should give you a result something like this:
Often you will want to add some spacing between columns. You also will probably want the columns to meet both edges of the page. If you add 10px margin to the right of each column then the content will be 10px away from the right edge of the page; if you add 10px margin to the left of each columns then the content will be 10px away from the left, and will not line up with other pages content.
There is a simple solution to this. Add 10px left margin to all columns, but then overwrite this rule for the first columns only. Doing it this way ensures that the columns will always fit the page snugly, regardless of how many the page is split into.
Note in the example above below that .columns-alpha (plural) is the flavour of column selected in the page configuration. .column-alpha (singular) is the first column of any multi-column instance.
