How to Work with Multiple Columns in CSS3 - dummies

How to Work with Multiple Columns in CSS3

By John Paul Mueller

CSS3 provides a new method for working with columns that doesn’t require you to have a math degree and perform test setups with arcane styles.

The column styles provide the means to create multiple columns on a page without a lot of effort on your part. Depending on the specific style you use, you can obtain various layouts or simply create a newspaper-type setup where content flows from column-to-column based on the user’s browser setup.

As with anything CSS3-specific, you need to test your application with the browsers that your users intend to use. In addition, this feature is considered experimental — and you have to jump through a few hoops to make it work with some browsers.

While Internet Explorer and Opera support the column properties directly, you must prepend -moz- to make them work with Firefox and -webkit- to make them work with Safari and Chrome. The following list provides a brief overview of the column properties.

  • column-count: Specifies the number of columns to create. The width of the columns automatically fluctuates as the user resizes the browser window (or the browser displays a horizontal scrollbar to make it possible to scroll across columns when a specific width is set as well).

  • column-fill: Determines how the browser fills the columns (either filling one column at a time or filling all columns simultaneously with an even amount of content).

  • column-gap: Creates a gap between columns to make it easier to determine where one column ends and another begins.

  • column-rule: Creates a rule between columns so the user can see a physical separator. This property consists of color, style, and width.

  • column-rule-color: Determines with color of the rule used between columns.

  • column-rule-style: Determines the style of the rule used between columns.

  • column-rule-width: Determines the width of the rule used between columns.

  • column-span: Specifies the number of columns that an object can span.

  • column-width: Specifies a column width.

  • columns: Provides a shorthand method for defining both the column-count and column-width properties.

One of the easiest ways to begin experimenting with columns is to create some content and then use a newspaper-style layout to present it. The following procedure helps you create a multiple column newspaper layout for some dummy text.

  1. Create a new HTML5 file with your text editor.

  2. Type the following code for the HTML page.

    <!DOCTYPE html>
     <title>Creating a Newspaper Layout</title>
     <link rel="stylesheet" href="NewspaperLayout.CSS" />
     <h1>Creating a Newspaper Layout</h1>
     <p id="Text">
     Lorem ipsum dolor sit amet, consectetuer
     adipiscing elit, sed diam nonummy nibh euismod
     tincidunt ut laoreet dolore magna aliquam erat
     volutpat. Ut wisi enim ad minim veniam, quis
     nostrud exerci tation ullamcorper suscipit
     lobortis nisl ut aliquip ex ea commodo consequat.
     Duis autem vel eum iriure dolor in hendrerit
     in vulputate velit esse molestie consequat, vel
     illum dolore eu feugiat nulla facilisis at vero
     eros et accumsan et iusto odio dignissim qui
     blandit praesent luptatum zzril delenit augue
     duis dolore te feugait nulla facilisi. Nam liber
     tempor cum soluta nobis eleifend option congue
     nihil imperdiet doming id quod mazim placerat
     facer possim assum. Typi non habent claritatem
     insitam; est usus legentis in iis qui facit eorum
     claritatem. Investigationes demonstraverunt
     lectores legere me lius quod ii legunt saepius.</p>

    All you have here is a heading and paragraph. The paragraph contains the dummy text used for content in the newspaper layout.

    If you’re wondering what Lorem ipsum is all about, you can read more at Lorem Ipsum. In fact, the site provides a dummy-text generator that won’t distract a viewer’s attention from an underlying layout or other technical consideration.

  3. Save the file as NewspaperLayout.HTML.

  4. Create a new CSS file with your text editor.

  5. Type the following CSS style information.

     column-count: 3;
     column-rule: 4px ridge Blue;
     column-gap: 20px;
     -moz-column-count: 3;
     -moz-column-rule: 4px ridge Blue;
     -moz-column-gap: 20px;
     -webkit-column-count: 3;
     -webkit-column-rule: 4px ridge Blue;
     -webkit-column-gap: 20px;

    The example creates a style that includes three columns, with a blue rule between columns. Of course, you need to repeat the styles three times — once for each of the browser requirements.

  6. Save the file as NewspaperLayout.CSS.

  7. Load the NewspaperLayout example.

    You see a newspaper-style format. This format will be easier to read when you work with a lot of text on a site. In the past, you’d have had to work pretty hard to get a layout as nice as this one, but now all you need is a few simple styles.