Multi-Columns

Posted by Helmut_pdorf on 28 May 2012 07:26, last edited by Helmut_pdorf on 28 May 2012 07:43

Tags: css3 div layout multi-column

rating: 0+x
This wotks ONLY in FF, Chrome and Safari ! Not in IE !

There are some questions how to divide outcoming ListPages module output ibnto 2 or more columns automatically - this is more a questikon about print-layout like we all know it from the newspaper.

I will have a try here with the newest CCS3 layout commands ( as usual they will work only under Firefox m Chrome and Safari) but we never know when the other browser will show them correctly and not under standard text box.

The typical cccs commands are .

<!-- HTML -->
<div id="content">
    <p>Lorem Ipsum ......</p>
    <p>Some paragraphs</p>
</div> 
For the setup of column count now use "column-count":
 /* CSS */
#content {
    width: 600px;
    column-count: 2;
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-gap: 40px;
} 
For the setup of colujmn-widht use  "column-width" verwendet.
 /* CSS */
#content {
    width: 600px;
    column-width: 280px;
    -moz-column-width: 280px;
    -webkit-column-width: 280px;
    column-gap: 40px;
    -moz-column-gap:40px; /* Firefox */
    -webkit-column-gap:40px; /* Safari and Chrome */
}

Both has the same result . the division of the 600px width by 280px gives 2,14 - therefore the browser takes the digits before the decimal point only ( = 2 columns) !

At the moment:
http://www.w3schools.com/css3/css3_multiple_columns.asp says:

Internet Explorer does not yet support the multiple columns properties.

Firefox requires the prefix -moz-.

Chrome and Safari require the prefix -webkit-.

Examples

Let's take an example with following code:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula.

It should work in FF (12) and perhaps in chrome & Safari…
Anogher use is in ListPages output ..


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.