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
| 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 ..
Below works in FF, Chrome, Safari, Opera, IE:
Directly use CSS style code for a DIV to show multi-columns:
Above code will result into:
Another line as example 2.
Another line as example 3.
Another line as example 4.
ANOTHER WAY TO USE MULTIPLE-COLUMNS, is to use CSS file, class & DIV:
Sub-domain/Sub-directory site's admin need to find+goto the used theme's CSS-file edit page, and add these CSS properties:
After adding above CSS properties in your-site's CSS file, use below code in your webpage:
Above code will result into:
Another line as example 6.
Another line as example 7.
Another line as example 8.