Layout Columns
Elated includes these handy styles for quick layout shaping inside your content. The classes below demonstrate how to add columnar content using fraction-based naming conventions. The only rule here is you need to add a “_last” suffix to each ending block. Jump to the example at the bottom of this page to view a detailed example.
Four Columns
[div.one_fourth]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_fourth]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_fourth]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_fourth_last]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
Three Columns
[div.one_third]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_third]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_third_last]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
Two Columns
[div.one_half]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_half_last]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
Combo Columns
[div.one_third]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. .
[div.two_thirds_last]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_fourth]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_half]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend. Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_fourth_last]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.one_fourth]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
[div.three_fourths]
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
Fusce ac gravida nulla. Fusce ultricies venenatis aliquet. Nulla non est dolor, id bibendum est. Proin at tempus nunc. In vulputate luctus aliquam. Nulla blandit placerat arcu in volutpat. Nulla commodo blandit elit at gravida. Curabitur venenatis diam in sem porta eleifend.
Example:
<div class="one_fourth"> column one content.. </div> <div class="one_fourth"> column two content.. </div> <div class="one_fourth"> column three content.. </div> <div class="one_fourth last"> column four content..(notice the last suffix) </div> <! -- Add the div.clear tag to start a new horizontal column --> <div class="clear"></div>