2-Column Layout

Implementing this generic 2-Column Layout splits your content into two blocks that appear side-by-side.

Difficulty: 1 out of 5 stars

Notes about implementing 2-Column Layout

  • Wrap intended 2-Column content within a div with class="twoColumn"
  • Wrap the content you intend you appear on the left-hand side of the screen within the first div
  • Wrap the content you intend you appear on the right-hand side of the screen within the second div
  • If you are familiar with CSS, you are welcome to create your own custom layouts for your content blocks.

Why use 2-Column Content?

Using 2-Column Layout makes sense when:

  • Doing so means the page content will fit on one page and the reader does not have to scroll.
  • The content consists mostly of bulleted or numbered lists with short line length.

This text is only here to demonstrate the 2-Column Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lorem leo, mattis in pharetra ut, vulputate et diam. Nunc imperdiet leo sed augue volutpat et pulvinar nulla mollis. Nunc porta blandit vehicula. Praesent et leo eu nulla convallis volutpat lobortis eu risus.

Sed laoreet euismod libero, nec tincidunt nulla facilisis eu. Proin consectetur congue augue a sodales. Ut erat metus, convallis eget mattis id, tincidunt ac justo. Morbi varius, velit eget ullamcorper egestas, eros leo lobortis mi, non consequat diam sem vitae neque.

Nulla commodo est vitae enim tristique nec consequat augue molestie. Quisque fermentum aliquam dapibus. Vestibulum iaculis turpis in nibh malesuada semper. Nam ut dolor vel neque sollicitudin sodales eu ut mi. Sed at porta leo.

Aenean leo eros, commodo id dictum a, tristique et dui. Curabitur ut nisl felis. Mauris in nisi a nisl iaculis tincidunt. Etiam auctor hendrerit nulla, at interdum nulla ullamcorper nec. Nunc auctor, elit sed semper mattis, tortor turpis facilisis enim, ac aliquet sapien lectus in dolor.