SeNioR-

Description
The column module, unlike the grids module, provides classes that enable layouts comprising both fixed and fluid columns to be easily created. This is a layout often used for fixed sidebars with fluid content areas, for example. Additional classes are available to collapse the layout on smaller devices.
 
Usage
A column layout consists of a wrapper element, with the column elements as direct descendants of the wrapper. No other layout classes should be applied directly to the column elements.
An example of a column layout:
<div class='ipsColumns'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div> This would render as follows (background colors and padding added for clarity):
Fixed column Fluid column The wrapper receives the classname ipsColumns (note: plural), while individual columns receive the classname ipsColumn (note: singular).
 
Column Sizing
A number of different classnames are available to change the column sizing. One of these classes should be applied to each column in addition to the base ipsColumn classname.
ipsColumn_veryNarrow - 50 pixels wide ipsColumn_narrow - 120 pixels wide ipsColumn_medium - 200 pixels wide ipsColumn_wide - 280 pixels wide ipsColumn_veryWide - 360 pixels wide ipsColumn_fluid - Takes up remaining space; should be used on all fluid columns  
Border Spacing
By default, no spacing is provided between columns (see example above). Spacing can be included around columns by using one of the three following classnames on the root ipsColumns element:
ipsColumns_verticalSpacing - 15 pixels vertical spacing ipsColumns_horizontalSpacing - 15 pixels horizontal spacing ipsColumns_bothSpacing - 15 pixels spacing on all sides The spacing can be halved by also including the ipsColumns_halfSpacing classname.
<div class='ipsColumns ipsColumns_bothSpacing ipsColumns_halfSpacing'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div> Fixed column Fluid column  
Responsiveness
To cause the layout to collapse on smaller devices, add the classnames ipsColumns_collapseTablet or ipsColumns_collapsePhone to the wrapper element. Columns will collapse into source-order, one after the other.