With the reference of previous chapter now you may have familiar with CSS3 Fonts. In this chapter we will learn about the CSS3 Multiple Columns, which is best useful when we have to design multiple layout article.
CSS3 Multiple Columns
A Multiple Columns is such an advance feature of CSS3 which is used for creating the newspaper layout. You can create your articles to Multiple Columns, even if it is in one paragraph.
There are three properties of CSS3 Multiple Columns that is used to make the proper layout, what you want to do. The all major browsers support Multiple Column properties except Internet Explorer.
The three properties of CSS3 Multiple Columns have been described as follows:
✔ column-count
✔ column-rule
✔ column-gap
Where column-count defines the number of columns, column-rule defines the line style between the columns and the column-gap defines the gap (blank spaces) between the columns.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#multiple_columns
{
text-align:justify;
column-count:3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule: 2px solid #6AAFCF;
-webkit-column-rule: 2px solid #6AAFCF;
-moz-column-rule: 2px solid #6AAFCF;
column-gap: 40px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
}
</style>
</head>
<body>
<div id="multiple_columns">
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
</div>
</body>
</html>