Two Column Layout

In traditional print design two or more columns are used to create text that is better to read by breaking up long lines of text in to shorter units. This can often bee seen in newspapers. Newspapers commonly use columns of about 12 picas (50 mm) in width. The idea here is that the eye of the reader should not have to read long unbroken line of type. The visual reader knows that he or she is expected to read down the first column and then down the second column with is next too it.

When presenting such information in a web page we need to keep the column in reading order so that the screen reader will move from column to column in the right order. It is also important that the columns be in correct order in the code of the page so that should a user come to the page with a browser that does not support CSS formating the content is still presented in the correct reading order. Below is an example, note that the text is just filler material and not real content:

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 2

CSS example

Here we have two columns of equal width. This was done by defining two styles col1 and col2 as shown below:

    #col1 {
    float:left;
    width:350px;
    }
	#col2 {
    float:right;
    width:350px;
    }
    
    #foot {
    clear:both;
    
    }

Each Column is then placed into the file in order with <div id="col1"> and <div id="col2"> surrounding the content of the corresponding column. The foot style is used to clear the columns and return to normal presentation.

Using CSS we are able to define columns as needed without resorting to tables which should not be sued for page layout coding.

Greg Kearney, February 2008