Column 1
Sectional Navigation
Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit.
Column 2 (H1)
Three Column Layout Template
This three column layout uses a script provided by the folks at Project VII - PVII Equal Height CSS Columns. This script allows you to achieve the equal height column look without the use of a background image. If the height of any column ever changes, PVII Equal Height Columns will make all necessary adjustments—instantly. Take the time to read over the tutorial so that you understand how the script works.
It EHC layout does require the use of a small javascript file. If your viewer has javascript disabled, your page content will be fully accessible and your columns styled at their natural heights.
This particular layout uses a fixed width. If you change the width of ANY of the columns, you will need to keep the box model in mind. What is the box model you ask? The CSS Box Model.
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Changing the background colors of the columns is as easy as changing the style rules for any of the columns.
Column 3
Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit.