19Sept
2009
2009
Create Multiple Column With CSS3
Wouldn't it be great to have the text of an article is arranged over several columns just like newspaper and print layout method? And how about doing it with just simple CSS codes? The CSS3 specification has made it possible to have multi-column layout module.
The width is done by column-width and the number of column is done by column-count. To have space between column, we need to specify a width for column-gap.By defining column-rule, we can have a line in between columns.
One of the best features about this CSS3 module is that, the ability for content to flow from one column to another within liquid layouts.
Layout Module
Browser support may be patchy, but by employing CSS rule prefixes such as -moz- and -webkit- in the style sheet, a multi-column layout in website presentation is possible by defining a width for each column, or by defining a number of column.The width is done by column-width and the number of column is done by column-count. To have space between column, we need to specify a width for column-gap.By defining column-rule, we can have a line in between columns.
One of the best features about this CSS3 module is that, the ability for content to flow from one column to another within liquid layouts.
The CSS and HTML codes for this demo:
<html>
<head>
<style type='text/css'>
.multiplecolumns {
-moz-column-width: 140px;
-webkit-column-width: 140px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
border:1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="multiplecolumns">Wouldn't it be great to have the text of an article is arranged over several columns just like newspaper and print layout method? And how about doing it with just simple CSS codes? The CSS3 specification has made it possible to have multi-column layout module.<h2>Layout Module</h2>Browser support may be patchy, but by employing CSS rule prefixes such as -moz- and -webkit- in the style sheet, a multi-column layout in website presentation is possible by defining a width for each column, or by defining a number of column.
The width is done by <span style="font-style: italic;">column-width</span> and the number of column is done by <span style="font-style: italic;">column-count</span>. To have space between column, we need to specify a width for <span style="font-style: italic;">column-gap</span>.By defining <span style="font-style: italic;">column-rule</span>, we can have a line in between columns.
One of the best features about this CSS3 module is that, the ability for content to flow from one column to another within liquid layouts. </div>
As usual, the orange color represents the CSS codes and the blue color represents the HTML code.
With a little trick and tweak we can change the border of the layout into rounded corners.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et,
Heading
Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero.This is make possible by adding these codes: -moz-border-radius: 10px; and -webkit-border-radius: 10px;
We can also change the single vertical lines that divide the columns into double vertical lines by making a little changes on the these codes: -moz-column-rule: 1px solid #ddccb5; and -webkit-column-rule: 1px solid #ddccb5;. Change the line pixel from '1' to '3' and change the word 'solid' to 'double'.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et,
Heading
Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero.The same thing goes to border. We can change from 'solid' to 'dashed': border:1px solid red; changed to border:1px dashed red;