Warning: include(1.x/nav-section.php): failed to open stream: No such file or directory in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Warning: include(): Failed opening '1.x/nav-section.php' for inclusion (include_path='.:/ip/iucommsg/wwws:/ip/pagriet/lib:/ip/iucommsg/wwws/_includes:/ip/iucommsg/wwws/_shared-sections:/ip/iucommsg/wwws/_php') in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Layout & Grid

Column layout: 100%

Use this layout to extend text, images, or video across the full width of the content area.

100%
Show/hide markup
<div class="full-width">
    <p>100%</p>
</div>

Column layout: halves

Use this layout to divide the content area in half. It works great when you want two content chunks to have similar importance.

50%
50%
Show/hide markup
<div>
    <div class="one-half">
        <p>50%</p>
    </div>

    <div class="one-half">
        <p>50%</p>
    </div>
</div>

Column layout: thirds

Use the one-third/two-thirds and two-thirds/one-third layouts to divide the content area into two unequal columns.

Two-thirds/One-third

66%
Show/hide markup
<div>
    <div class="two-thirds">
        <div class="column-demo">66%</div>
    </div>

    <div class="one-third">
        <div class="column-demo">33%</div>
    </div>
</div>

One-third/Two-thirds

66%
Show/hide markup
<div>
    <div class="one-third">
        <div class="column-demo">33%</div>
    </div>

    <div class="two-thirds">
        <div class="column-demo">66%</div>
    </div>
</div>