CSS3 Columns and WebPage Pagination

The traditional HTML4/CSS/JavaScript were not conducive to laying out webpages into columns. Converting content to columns in webpages was traditionally accomplished using the table, tr, td tags or by combining div, span, and other tags in the context of a predefined webpage layout logic.This worked well until we started seeing emergence of laptops with different aspect ratios, smartphones with different screen resolutions, tablets with different screen resolutions, and the every increasing needs of webpage content usability.

CSS3 Columns simplifies this very challenge. It offers the ability to layout multiple columns by specifying a predefined width, automatically calculate column width based upon the number of columns, as well as accept gaps between the column and format rulers in the column gap. CSS3 columns is powerful because it allows you to extend the capability to a valid HTML tag or a tag matching a specific style declaration.

Predefined CSS3 Column Widths

In the example below, the content within the body tag (which is pretty much the entire webpage) is organized into 300px wide columns with 20px gap between them. You can use the percentage unit as well. This is extremely useful when you want to layout your columns different based on the devices.

The !important in each of the definitions below is optional and is primarily used to override any pre-existing styles.

* body{
-moz-column-width: 300px !important;
-moz-column-gap: 20px !important;
-webkit-column-width: 300px !important;
-webkit-column-gap: 20px !important;
}

CSS3 Column Count

In many cases, there may be a need to specific number of columns. For example, placing several columns on a webpage  can get tiring to read and is a recipe for bad-design. In the example below, the content within the body tag is organized into 3 columns. The width of these columns are auto-calculated by the browser and based on the details below, there is a 20px gap between the columns.

* body{
-moz-column-count: 3 !important;
-moz-column-gap: 20px !important;
-webkit-column-count: 3 !important;
-webkit-column-gap: 20px !important;
}

CSS3 Column Rules

Column rules are designer lines that are drawn in the column gaps. In the example below, the a red-line is drawn between the two columns. Column rule is a combination of rule color, rule style, and rule width.

* body{
-moz-column-count: 3 !important;
-moz-column-gap: 20px !important;
-webkit-column-count: 3 !important;
-webkit-column-gap: 20px !important;
-webkit-column-rule:#ff0000 solid 1px;
-moz-column-rule:#ff0000 solid 1px;
}

CSS3 Column Headers

You can also add headers to span across columns. The concept is very simple. Create a h1 tag or any other style, and add the following style to it. The example below will ensure that the header will span across columns.

* h1{
-moz-column-span: all !important;
-webkit-column-span: all !important;
}

CSS3 Column Quirks

Given HTML5/CSS3 are in Beta phase and the support for these vary across browsers, accessing the CSS3 column properties from JavaScript is quirky. For example, when you create columns using the column width, you cannot retrieve the total number of columns from JavaScript. Reportedly, these quirks will be fixed in future versions of the browsers.

I hope you found this helpful. Please feel free to share any tips and tricks below.

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

%d bloggers like this: