Do you need to create a news article layout with 2-4 columns? Well, it is now so easy, you no need to use table tag or div with float property, CSS3 now support multiple column to enable you to create this. There are only 2 property you need to include in your css which is column-count and column-gap.
1. column-count
column-count property is used to divide a content into a number of specified column.
2. column-gap
column-gap property specifies the gap width between each column.
Example of on how to use multiple column in css3
Tikoan ultrico sito ratrum lorit neci pesetaie ameto sito turipo haoti gulao facilisoe idu pele sito velo orai nequex ultri tuxi liebeo conviluis gravido keumen ete ut moriol sotpio carai geio menai convalit turipi sagita ruti pras donio ani congi mekuai plato sondue solicto vali timon molie tismaei dea lacui nune hatibo nulai nequi enterdum mauri palvinor menecoi diami ameito egeto duo sapio semperi telei timoi palti mauriz dulia gujial ursiue estelio loroi nisio risusu Telei sito in nisio lopiun curio gujial feloxi sondue uto sapio fremen inim sotpio diami goi menai tikoan loroi sedoi nulai ticoduy aeni pesetaie nuni tuxi eto pele ememper solicto enterdum etui vezi nibhue eua a nuni dignisa orai gulao nune lorit conviluis nequi dulia telli geio duiso dera sito ete uria pras gravidue fringala iaculo scelerisu ultri ameto risusu ut hacio molie gulio ina egetsi ursiue dicti sito scelosqui ani nequel timon liebeo dea convalit sub welz pharetu adipi vali ameto vuliputu sipoi ameito moriol carai masie dapibu nequex tismaei eupa atic turipi erati malesudi inhac valio frinuilo sito mauri palti egeto augue mauriz ratrum palvinor velio velizu sceleris Aeni facilisoe gulao keumen scelerisu loi nequi dapibu egeto erati valio vuliputu velo sipoi telei tikoan sondue goi pharetu masie molie nequel sito impero nisio vali inim nuni moriol dalis gujial nulai nibhue eua liebeo famera ruti adipi menecoi comodi pele dignisa acio didaminia sito eua duiso ultri ani lorit pesetaie risusu turipo velpt buis hatibo vezi uto conviluis carai sito curiosue duo velo nuni at haoti aiculi palti ticoduy nune ultrico sotpio menai ete dicti sedoi vitael egetsi tismaei mauri etui velizu frinuilo semperi lacui plato malesudi feloxi quam
This is the css3 code. The webkit and moz extension is used to support older browser version.
<style type="text/css">
.example{
column-count: 4;
column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
-moz-column-count: 4;
-moz-column-gap: 20px;
}
</style>
CSS3 Multiple Column Generator
Alternatively, you can see our interactive demo by using our CSS3 Multiple Column Generator.