The css3 module multi-column allows to specify that the content of an element is spread over pre-imposted columns.
The content of the element adapts itself to the space available and we can specify the number (column-count) or the width (column-width) of the columns as desired.
At the moment, the css3 multi-column is only supported by Safari and Firefox (partially) using the correspondent css3: -webkit and -moz.
column-count: the number of columns to create
Example of css rule:
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
NB: The width of the column automatically adapts itself to the available space.
column-width: the width of the column in units of measure
Example of css rules:
column-width: 150px;
-moz-column-width: 150px;
-webkit-column-width: 150px;
NB: The number of columns adapts itself automatically to the available space
Together with the column-width, there is also the css3 properties column-width-policy and column-space-distribution not supported by any browser at the moment.
We can specify a height to the columns using the css property height
column-gap: the space in between each column in units of measure
Example of css rule:
column-gap: 30px;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-rule: specify a vertical line in between each column
Example of css rule:
column-rule: 2px solid black;
-moz-column-rule: 2px solid black;
-webkit-column-rule: 2px solid black;
NB: This vertical line position itself exactly in the middle of the space in between each column. Not supported by Firefox.
The column-rule has the same properties as ‘border’: color, width, style
- column-rule-color: the color of the vertical line
- column-rule-style: the style of the vertical line
- column-rule-width: the thickness of the vertical line
- column-span: allows to specify that a precise element of the content spreads itself over more columns using as value: a specific number of column or the value ‘all’ to cover all the columns.
NB: Not supported by any browser.
Example of css rule:
column-span: 2;
or
column-span: all;
A concrete example with:
<div style="width: 500px; background-color: #EEEEEE; color: #333333; padding: 30px;">
<p style="column-rule: 2px solid white; -moz-column-rule: 2px solid white;-webkit-column-rule: 2px solid white; column-gap: 30px; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-count: 4; -moz-column-count: 4; -webkit-column-count: 4;">
…lorem ipsum…example css3 multi-column…lorem ipsum…
</p>
</div>
Preview image done with Safari 3.1
The result:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis.
Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet,
posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus.
Suspendisse mollis elit eu magna. Morbi egestas.
{ 5 comments… read them below or add one }
CSS3 module to display a content on more columns was very use full to me. Thank you So much!
Hi,
Thanks for this great tutorial! Much appreciated, but,
can you point to the method (www link) that accomplishes this the “old - way” so that it works with Internet Explorer? I am trying to get an element to display the elements in columns…
Ciao,
the old way in html was the table:
http://www.w3schools.com/htmL/html_tables.asp
In css you could obtain the same result positioning your element with the css property float:
http://css.flepstudio.org/en/css-properties/float-clear.html
Hello there! Great site and tips! I didn’t know about column-* property and I am simply amazed! lol
But! Is there a way to align the text of each column separately? So, the first column, text-align: left and last column, text-align: right… Something like that.. I hope it’s possible, would really help me =)
Thanks!
Hello Juan.
I am sorry but nope. As it is a single element the text-align property will apply to all the columns.