Home » CSS 3 » CSS3 Multiple Columns

CSS3 Multiple Columns

css3-multiple-columns

CSS3 helps us to create columns of text as we see in the above image. This kind of column layouts we see in books and news papers. This structure can be achieved with CSS3 Multiple Columns. This helps a web developer to display the text fitted into columns.

CSS3 Multiple Columns properties

When we use multiple columns in our development, we should know three ‘column properties’. They are:
column-count,
column-width,
column-gap,
column-rule

* The column-count property sets the number of columns to be displayed.
* The column-width is used to specify column width.
* The column-gap property set the gap between columns.
* The column-rule-style CSS property lets you set the style of the rule drawn between columns in multiple column layouts.

HTML for CSS3 Multiple Columns

<div class="multiple-columns">
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.
</div>

CSS for CSS3 Multiple Columns

.multiple-columns {
    -webkit-column-count:3; /* Chrome, Safari, Opera */
    -moz-column-count:3; /* Firefox */
    column-count:3;

    -webkit-column-gap:30px; /* Chrome, Safari, Opera */
    -moz-column-gap:30px; /* Firefox */
    column-gap:30px;

    -webkit-column-rule:4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule:4px outset #ff00ff; /* Firefox */
    column-rule:2px outset #C5C5C5;
}

Here we set the number of columns to 3 and the gap between the columns to 30px. And we are adding the column border 2px. We can use column-width for specifying the column width, if we are not using number of columns. If we are not mentioning the number of columns, browser will automatically adjust the text to multiple columns in a maximum possible way.

Demo for CSS3 Multiple Columns

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.

CSS3 Multiple Columns Height Balancing

The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column.

Browser Support

Currently multiple column is supported in -webkit browsers, -moz browsers, Opera 11.1 and IE 10 browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*