CSS3 Multi Column
From CSScripting
Contents |
Introduction
In short, the CSS3 Multi-Column Module is a functionality to flow the content of an element into multiple columns.
The Multi-Column Module is part of the CSS3 specifications proposed by the W3C.
This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so pervasive in the print media (think newspapers, magazines) can now become a reality on the web
Credit goes to:
- the Mozilla folks for the first browser implementation of this CSS3 Module.
- Michael van Ouwerkerk for demonstrating three years ago (!) that splitting elements into columns with javascript is possible, and by so opening the possibility of a javascript implementation of the CSS3 Multi-Column module.
- the International Herald Tribune for the first(?) real life use of a dynamic multi-column layout.
Javascript Implementation
Demonstration
Visit the Demonstration Page for examples and test-cases.
Installation
- Upload The Script to your site.
- Attach The Script after the links to your stylesheet(s). Example:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="css3-multi-column.js"></script> - You can now use any of these CSS3 multi-column properties in your stylesheet:
How To Contribute
The Code is the page that hosts the work in progress.
You can help make the code more polished, robust and elegant, one little edit at a time... For instance, by :
- Commenting the code
- Harmonizing naming or formatting practices
- Adding functions skeletons
- Optimizing a piece of code
- Fixing bugs
- Adding cross-browser support
- Implementing functionalities
pkavubnsibcqqqebkxi
