| Property | Description |
|---|---|
| columns | column-width and column-count |
| column-width | Specifies a suggested, optimal width for the columns |
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | Column-rule-* properties |
| column-span | Specifies how many columns an element should span across |
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Multi column Layout</title>
<style type="text/css">
.multi_column_layout{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3; /* Standard syntax */
text-align:justify;
}
</style>
</head>
<body>
<div class="multi_column_layout">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<title>Column Count or Width</title>
<style type="text/css">
.column_count_or_width{
-webkit-column-width: 200px; /* Chrome, Safari, Opera */
-moz-column-width: 200px; /* Firefox */
column-width: 200px; /* Standard syntax */
text-align:justify;
}
</style>
</head>
<body>
<div class="column_count_or_width">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>Column Gap</title>
<style type="text/css">
.column_gap{
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-moz-column-count: 3;
-moz-column-gap: 50px;
column-count: 3;
column-gap: 50px;
text-align:justify;
}
</style>
</head>
<body>
<div class="column_gap">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>Column Rules</title>
<style type="text/css">
.column_rules{
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-rule: 2px solid #0099da;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-rule: 2px solid #0099da;
/* Standard syntax */
column-count: 3;
column-gap: 50px;
column-rule: 2px solid #0099da;
}
</style>
</head>
<body>
<div class="column_rules">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>Column Span</title>
<style type="text/css">
.column_span{
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-rule: 2px solid #F30;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-rule: 2px solid #F30;
/* Standard syntax */
column-count: 3;
column-gap: 50px;
column-rule: 2px solid #F30;
}
.col_span_font{
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
font-size:26px;
}
</style>
</head>
<body>
<div class="column_span">
<div class="col_span_font">Sample heading ccolumn span</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>