Three Column Layout

This page demonstrates a three column layout using divs and the helper class "one-third"

<div class="one-third"> The content for your first column... </div> <div class="one-third"> The content for your second column... </div> <div class="one-third"> The content for your third column... </div>

First Column

Nunc quis varius odio. In sed augue velit. Nunc vel auctor velit, vitae ultrices nunc. Nullam sed dui bibendum nunc luctus pharetra non eu nisl. Phasellus neque urna, semper at ultricies in, tempus tincidunt magna. Phasellus tempor posuere nulla, vel tincidunt dolor iaculis sodales. Suspendisse dapibus ipsum non nibh fermentum, quis gravida mauris tempor. Proin ultrices metus vitae congue vestibulum. Aenean et dui ac lorem consequat hendrerit. Suspendisse fermentum pellentesque velit sed lacinia. Curabitur ultrices purus lorem, mattis cursus ipsum cursus nec.

Second Column

Third Column

Sticky Side Column

This is an optional side bar column you can add to some or all of your pages. It can be useful for adding advertisements such as Adsense ads to be displayed on multiple pages.

When you include the side column, your main content will automatically adjust its width to accommodate it.

The side bar is 'sticky'; it will scroll down and remain in view.

You can turn on/off the side bar column per page by defining the $showSide option located at the top of each file.

# Display side menu # Change to 0 to hide side menu $showSide = 1;