Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Quick Tip: The Multi-Column CSS3 Module

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This post is part of a series called CSS3 Mastery.
Quick Tip: A Crash-Course in CSS Media Queries
Design a Prettier Web Form with CSS 3

For over six years, CSS3 columns have been available to us; yet, strangely, they're rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that - again - no support in Internet Explorer. But that's okay! The world will not end if IE users see one longer paragraph. I'll show you how to use this helpful module in today's video quick tip.

Final Product
#container p {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	
	column-count: 3;
	column-gap: 10px;
}

  • column-count: The desired number of columns for the element.
  • column-gap: The padding between each column.
  • column-rule: The divider for each column; can be used to specify a border.
  • column-width: Used to specifically state the width of each column.

Please note that we must prefix each property with the -webkit or -moz, accordingly; so: -webkit-column-count.

Do you use CSS columns in your projects? If no, why not?

Advertisement