CSS3 kullanılarak elemanların içerikleri sütunlara da ayrılabilir. Bu durumda içerik gazete sütunları gibi yerleştirilecektir.
column-count
Bu özellikle elemanın kaç sütuna ayrılacağı belirtilir. Girilecek değer sayı olmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz. Bu özelliğin yalın hali yazının yazıldığı an itibarı ile sadece Internet Explorer tarafından desteklenmektedir. Mozilla Firefox -moz-column-count şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-column-count şeklindeki bir versiyonunu desteklemektedir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
p.ornek2{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-width
Bu özellikle sütunların genişliği belirtilebilir. Fakat bu sadece bir öneridir. Tarayıcı buna uymamakta özgürdür. column-count ile column-width özellikleri birlikte kullanıldığında column-count özelliğinin column-width özelliğini bastırması muhtemeldir. column-width özelliği column-count özelliği kullanılmadan tek başına kullanılırsa tarayıcı sütun sayısını kendi belirler. Bu özellik ile yapılan biçimlendirmeler de alt elemanlara aktarılmaz. Girilebilecek değerler varsayılan auto değeri ya da bir uzunluk değeridir. auto değeri girildiğinde genişlik tarayıcı tarafından otomatik olarak belirlenir. Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox -moz-column-width şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-column-width şeklindeki bir versiyonunu desteklemektedir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
}
p.ornek2{
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
columns
Bu özellik ile column-count ve column-width değerlerinin ikisi birden tek satırda belirtilebilir. Kullanım formatı şu şekildedir:
columns: "column-width değeri" "column-count değeri"
Bu iki özelliğin ayrı ayrı kullanılması durumunda olduğu gibi birinin diğerini bastırması yine muhtemeldir. Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox -moz-columns şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-columns şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-columns: 200px 3;
-moz-columns: 200px 3;
columns: 200px 3;
}
p.ornek2{
-webkit-columns: 300px 2;
-moz-columns: 300px 2;
columns: 300px 2;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-gap
Bu özellikle sütunlar arasındaki boşluk belirlenir. Varsayılan değer olan normal değeri kullanıldığında normal bir boşluk bırakılır. Bu konuda W3C'nin tavsiyesi 1em'dir. Bunun dışında değer olarak uzunluk girilmelidir. Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox -moz-column-gap şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-column-gap şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
}
p.ornek2{
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
column-gap: 100px;
}
p{
border: 1px solid red;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-fill
Bu özellik yazıların sütunlara nasıl dağıtılacağını belirler. Varsayılan değer olan balance yazıların sütunlara olabildiğince eşit şekilde dağıtılmasını sağlarken auto değeri kullanıldığında sütunlar sırayla doldurulur ve sütunlardaki yazı miktarları farklılık gösterir. Bu özellik yazının yazıldığı an itibarı ile hiçbir tarayıcı tarafından desteklenmemektedir. Sadece Mozilla Firefox -moz-column-fill şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-moz-column-fill: balance;
column-fill: balance;
}
p.ornek2{
-moz-column-fill: auto;
column-fill: auto;
}
p{
border: 1px solid red;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-rule-style
Bu özellik ile sütunların arasına konacak çizginin biçimi belirtilebilir. Girilebilecek değerler none, hidden, dotted, dashed, solid, double, groove, ridge, inset ve outsettir. Varsayılan değer none değeridir. Bu değerlerin ne manaya geldiği Kenarlıklar bölümünde anlatılmıştır. Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox -moz-column-rule-style şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-column-rule-style şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
p.ornek2{
-webkit-column-rule-style: dashed;
-moz-column-rule-style: dashed;
column-rule-style: dashed;
}
p{
border: 1px solid red;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-rule-width
Bu özellik kullanılarak sütunlar arasındaki çizgilerin kalınlıkları ayarlanabilir. Varsayılan değer olan medium orta kalınlık manasına gelir. thin değeri ince, thick değeri kalın çizgi çizdirmeye yarar. Bunların dışında çizgi kalınlığı uzunluk cinsinden de ifade edilebilir. Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox -moz-column-rule-width şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-column-rule-width şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-column-rule-width: thin;
-moz-column-rule-width: thin;
column-rule-width: thin;
}
p.ornek2{
-webkit-column-rule-width: medium;
-moz-column-rule-width: medium;
column-rule-width: medium;
}
p.ornek3{
-webkit-column-rule-width: thick;
-moz-column-rule-width: thick;
column-rule-width: thick;
}
p.ornek4{
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
}
p{
border: 1px solid red;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-rule-color
Bu özellik ile sütunların arasındaki çizgilerin renkleri belirlenir. Değer olarak bir renk değeri girilmelidir. Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox -moz-column-rule-color şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-column-rule-color şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-column-rule-color: red;
-moz-column-rule-color: red;
column-rule-color: red;
}
p.ornek2{
-webkit-column-rule-color: blue;
-moz-column-rule-color: blue;
column-rule-color: blue;
}
p.ornek3{
-webkit-column-rule-color: #00FF00;
-moz-column-rule-color: #00FF00;
column-rule-color: #00FF00;
}
p.ornek4{
-webkit-column-rule-color: #FFFF00;
-moz-column-rule-color: #FFFF00;
column-rule-color: #FFFF00;
}
p{
border: 1px solid red;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-rule
Bu özellik tek seferde sütunlar arasına konan çizginin biçimini, kalınlığını ve rengini belirlemeye yarar. Kullanım formatı şu şekildedir:
column-rule: "column-rule-width değeri" "column-rule-style değeri" "column-rule-color değeri"
Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox -moz-column-rule şeklindeki bir versiyonunu diğer tarayıcılar da -webkit-column-rule şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
-webkit-column-rule: medium solid red;
-moz-column-rule: medium solid red;
column-rule: medium solid red;
}
p.ornek2{
-webkit-column-rule: thin dashed blue;
-moz-column-rule: thin dashed blue;
column-rule: thin dashed blue;
}
p.ornek3{
-webkit-column-rule: thick dotted #00FF00;
-moz-column-rule: thick dotted #00FF00;
column-rule: thick dotted #00FF00;
}
p.ornek4{
-webkit-column-rule: 10px double #FFFF00;
-moz-column-rule: 10px double #FFFF00;
column-rule: 10px double #FFFF00;
}
p{
border: 1px solid red;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<p class="ornek1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p class="ornek4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
column-span
Bu özellikle sütunlara bölünmüş bir eleman içerisine yerleştirilen elemanın kaç sütuna yayılacağı belirtilir. Varsayılan değer 1'dir. Bunun dışında girilebilecek tek değer all değeridir ve elemanın tüm sütunlara yayılmasını sağlar. Yazının yazıldığı an itibarı ile bu özelliğin yalın halini sadece Internet Explorer desteklemektedir. Mozilla Firefox dışındaki diğer tarayıcılar da -webkit-column-span şeklindeki bir versiyonunu desteklemektedir. Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sütunlar</title>
<meta charset="UTF-8">
<style>
h2.ornek1{
-webkit-column-span: 1;
column-span: 1;
}
h2.ornek2{
-webkit-column-span: all;
column-span: all;
}
div{
border: 1px solid red;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
width: 500px;
}
</style>
</head>
<body>
<div><h2 class="ornek1">Lorem ipsum dolor sit amet</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br>
<div><h2 class="ornek2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br>
</body>
</html>
Taşmalar <<<<< C >>>>> Sayfa Bölme