One Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi.
Two Thirds
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
Two Thirds
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi.
One Half
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Half
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi.
One Half
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi.
One Half
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
One Quarter
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
One Fourth
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit.
Three Fourths
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
Three Fourths
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit. Fusce lacinia, nisl vitae tempor porttitor, massa lacus iaculis ante, eu cursus urna enim ullamcorper neque.
One Fourth
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et quam ut nisl viverra luctus et vel mi. Curabitur faucibus vehicula velit.
How to code columns
Columns work in percentages. You can divide your content into 10%, 20%, 25%, 30%, 33%, 40%, 50%, 60%, 66%, 70%, 75%, 80%, 90%, 100% increments.
note: 33
and 66
are simplified 1 third and 2 thirds.
note: You cannot put columns inside columns.
note: It is important to make sure the first column has first="true"
and the last column has last="true"
attributes.
2 Column example:
[column width="50" first="true"]content[/column] [column width="50" last="true"]content[/column]
3 Column example:
[column width="33" first="true"]content[/column] [column width="33"]content[/column] [column width="33" last="true"]content[/column]
4 Column example:
[column width="25" first="true"]content[/column] [column width="25"]content[/column] [column width="25"]content[/column] [column width="25" last="true"]content[/column]