Layout

Description

How to do an equal column layout and fluid layout using CWO CSS classes.

Sample

When you need display information side by side, use the equal column layout.

Two Column Layout

[column 1 content here]

[column 2 content here]

<div class="cols_wrapper">
    <div class="col_1_of_2 col">
        [column 1 content here]
    </div>
    <div class="col_2_of_2 col">
        [column 2 content here]
    </div>
</div>

Three Column Layout

[column 1 content here]

[column 2 content here]

[column 3 content here]

<div class="cols_wrapper">
    <div class="col_1_of_3 col">
        [column 1 content here]
    </div>
    <div class="col_2_of_3 col">
        [column 2 content here]
    </div>
    <div class="col_3_of_3 col">
        [column 3 content here]
    </div>
</div>

Fluid Layout

When you have a lot of information to be displayed on the screen, you can choose to use fluid layout instead of the default 960px max width layout. Just add the class fluid to the body element.

<body class="fluid">