Documentation
Usage: Short chunks of content can be arranged in the main content area in two columns.
Do
- Always end your column rows with a clear. This will keep text from wrapping and aligning oddly.
Don’t
- Avoid using long columns. Web pages are not read up and down the page like a newspaper, and they should not be laid out that way.
Example
Three One-Third Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
One Two-Thirds Column and One One-Third Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Code
HTML
<div class="one-third column">
...
</div>
<div class="one-third column">
...
</div>
<div class="one-third column">
...
</div>
<p><br class="clear" /></p>
<div class="two-thirds column">
...
</div>
<div class="one-third column">
...
</div>
<p><br class="clear" /></p>Available as a shortcode in the WordPress theme
[onethird]...[/onethird] [onethird]...[/onethird] [onethird]...[/onethird] [clear] [twothirds]...[/twothirds] [onethird]...[/onethird] [clear]