Having multiple columns

Note: I’m not using dreamweaver, so I’ll just write a post on a CSS trick.

Having multiple columns is something that seems like it should be easy, but often times it’s not.  It could be difficult to get the spacing right, and it’s even more difficult to get the text to flow from one column to the next automatically.  There are tricks to get this done, but they’re unnecessarily complicated (programming very much follows Ockham’s Razor: unnecessary complication is bad).

The way that you should create multiple columns is by using the new CSS3 column functionality.  Basically, you just specify the number of columns, spacing between them, and any sort of styling used to separate them, and you’re finished.  For example:

(note: the css3 column feature isn’t fully supported in Firefox, Safari and Chrome yet, so you just have to use the easy -moz and -webkit prefixes.)

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}

See http://www.w3schools.com/css/css3_multiple_columns.asp for more information.

Happy Coding!

– Adam Zerner

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s