Equal Width Columns

A recent question on the freepages help mailing list asked about how to present a multiple columns layout where all columns had an equal width. "I want my page to resemble that of a newspaper." A number of solutions were presented.

NOTE: Clicking on any of the thumbnails will take you to the demo page for each of the Equal Width Column Layouts

CSS Tables

Probably the simplest solution is to use a table based layout with equal width cells. The one shown below is a simple three column layout using CSS to style the table and data cells.

A working example and the style rules Newspaper Column

You will need to adjust the content if you want a balanced look.

CSS3 Multiple Columns

The next solution was shared by Barry Carlson and uses the newer CSS3. Though not effective in IE9 and earlier browsers, the more recent browsers  can render the CSS column properties which are able to replicate the flow  of news type columns. An example Barry did some time ago is at:- http://sites.rootsweb.com/~bristowe/test/columns.html

It is set-up with an 800px page width, side margins of 50px, 3 columns  with a 30px gap between them and a vertical divider in each. This provides  columns widths of 245px, but changing the page width declaration will  automatically adjust the column widths and the the text flow. His example page also allows you to select the number of columns you need and view the results.

Out of curiosity, I used Barry's suggestion and added a couple of images to the content. In this example, you can see the results. Even with the images added, the columns have a balanced look.

You can download Barry Carlson's  solution from http://countjustonce.com/test/columns.zip