Code and Stuff

Jun 8, 2012

CSS3 Layout - columns

With CSS3 multi column (http://www.w3.org/TR/css3-multicol) you can create content that is organized in columns without having to split it yourself or use a javascript library to do it for you. You simply have to set the column-count or the column-width parameter of a tag and it's content will be shown in columns. Firefox and Webkit based browsers require the vendor prefix. The details of the columns can be controlled with various other parameters. These include setting the width of each column, the gap between the columns and a separator line.

Firefox does not fully implement columns. The support is limited to splitting content, but the flow control (column brake and span) is not yet implemented.

Example


Columns: 2, 3, 100px
Gap: none, default, wide
(not supported by firefox)

Result

/* a block of something */

Here some text from Wikipedia's css page: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

code

div.cols {
   -moz-column-count:2;
   -webkit-column-count:2;
   column-count:2;
   -moz-column-count:3;
   -webkit-column-count:3;
   column-count:3;
   -moz-column-width:100px;
   -webkit-column-width:100px;
   column-width:100px;
   -moz-column-rule: solid black 1px;
   -webkit-column-rule: solid black 1px;
   column-rule: solid black 1px;
   -moz-column-gap:0px;
   -webkit-column-gap:0px;
   column-gap:0px;
   -moz-column-gap:4em;
   -webkit-column-gap:4em;
   column-gap:4em;
}

div.cols .somechild {
   /* not supported by firefox as of June 2012  */
   -webkit-column-span:all;
   column-span:all;
}


div.cols p:first-of-type {
   /* not supported by firefox as of June 2012  */
   -webkit-column-break-before:always;
   break-before:column;
   /* not supported by firefox as of June 2012  */
   -webkit-column-break-after:always;
   break-after:column;
}

No comments: