CSS3 Multiple Columns

CSS3 offers many features that can give your website a great new look. One of these is multiple columns. Columns can be used in news articles, comments, and even the body of an informative page to give it a professional look. You are not confined to a three-column newspaper style in CSS3, however. There are many options to choose from so that you get the design that fits your purposes.


Number and Width of Columns

Perhaps the most important settings are the number and width of columns. To set the number and width of columns for the Opera browser, use the "column-count" and "column-width" properties in your style. For Firefox, you will need "-moz-column-count" and "-moz-column-width," and for Chrome/Safari use "-webkit-column-count" and "-webkit-column-width." For example, to make a

which has four 80px wide columns, you would include the following in your style. 

div{
column-width:80px;
-moz-column-width:80px;
-webkit-column-width:80px;

column-count:4;
-moz-column-count:4;
-webkit-column-count:4;
}

This ensures that your code is compatible with these four major browsers. In the future, these column properties will probably be more unified so that you do not need as much code.


Column Rule and Gap

You can make a column rule, which is just a line separating the columns, with the "column-rule" property. CSS3 allows you to specify the width, style, and color of the rule. Column gaps can be set with the "column-gap" property. If you want a traditional look, you might consider either a solid black rule 1-2px wide with 20-40px gaps between columns, or no column rule with the same spacing. If you want a fancier look, try a green or blue rule with the "groove" column style. Examples of these are given below.

div{
column-rule:1px solid black;
-moz-column-rule:1px solid black;
-webkit-column-rule:1px solid black;

column-gap:30px;
-moz-column-gap:30px;
-webkit-column-gap:30px;
}

div{
column-rule:7px ridge blue;
-moz-column-rule:7px ridge blue;
-webkit-column-rule:7px ridge blue;

column-gap:20px;
-moz-column-gap:20px;
-webkit-column-gap:20px;
}

Column Span

Sometimes you may want HTML elements to span more than one column instead of being confined to a single column. A title, picture, or quote, for example, might fit more naturally across several columns or the entire width. To make an element span more than one column, use the "column-span" property. The following code would allow all

tags to span two columns. Note that "column-span" is only available for Opera and Chrome at this stage. To make an element span all columns, use the "all" option instead of a number of columns. 

h2{
column-span:2;
-webkit-column-span:2;
}

Content Overflow

When content in columns that have a gap to the right contain words or pictures that are too large to be displayed in one column, they are clipped halfway between the current column and the next column. Furthermore, column height constraints, page length and column breaks may cause content to "overflow" from the normal content area. When this happens, additional columns are created: "overflow columns." This can be frustrating to designers, especially when this content is a necessary feature of the article, but they want it displayed in a certain way. To hide content that overflows, use the "overflow:hidden" property in your style sheets, and to show this content in extra columns, use the "overflow:visible" property.


Another helpful setting is "word-wrap:break-word." This allows long words to be broken over multiple lines instead of overflowing from the regular area. It is especially useful for boxed elements of fixed width. If you want text to only break at certain characters, such as hyphens, use the "word-break:hyphenate" property. "word-break:break-all" will allow long words to break at any character.

p{
overflow:hidden;
word-wrap:break-word;
word-break:break-all;
}

Conclusion

With CSS3, web designers can easily create pages with multiple columns in order to display their content in a professional manner. Column number, width, height, rule, gap, span and overflow can be tailored to each user's specific needs. It is a great way to give your site a new look.