Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



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 measure browsers support Multiple Column properties except of Internet Explorer.

The three properties of CSS3 Multiple Columns has 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.

Below is complete syntax along with example


<style>
.newspaper
{
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
column-count:3;
-webkit-column-gap:40px; /* Chrome, Safari, Opera */
-moz-column-gap:40px; /* Firefox */
column-gap:40px;
-webkit-column-rule:4px outset blue; /* Chrome, Safari, Opera */
-moz-column-rule:4px outset blue; /* Firefox */
column-rule:4px outset blue;
}
</style>
</head>
<body>
<div class="newspaper">
It's not just a pleasure to enter in this industry, but we are blessed to offer an array of IT services and products that count us in unmatched category. Our sole attention is to make a good move where we learn all new technology and thereby ease your job for quick and effective output. Oriana IT Solutions presents world class services that will surely drive your business to a higher level. We deal with IT Services, Consulting, Mobility Products and Services by using Advanced Technologies. And if we are so sure about offering a flawless job then it is only because of years of experienced expertise who perfectly know when and what to do. Our highly groomed tech team is always ready to take challenges from the core. We accommodate a pool of technically sound resources that is why we are geared up to fulfill the requirements of our clients in time. Oriana IT Solutions is a hub of passionate people who are dedicated and bear a potential to work on deadlines. We deliver specialized and innovative products to each of our clients that help in exponential growth of their business.
</div>

Output

It's not just a pleasure to enter in this industry, but we are blessed to offer an array of IT services and products that count us in unmatched category. Our sole attention is to make a good move where we learn all new technology and thereby ease your job for quick and effective output. Oriana IT Solutions presents world class services that will surely drive your business to a higher level. We deal with IT Services, Consulting, Mobility Products and Services by using Advanced Technologies. And if we are so sure about offering a flawless job then it is only because of years of experienced expertise who perfectly know when and what to do. Our highly groomed tech team is always ready to take challenges from the core. We accommodate a pool of technically sound resources that is why we are geared up to fulfill the requirements of our clients in time. Oriana IT Solutions is a hub of passionate people who are dedicated and bear a potential to work on deadlines. We deliver specialized and innovative products to each of our clients that help in exponential growth of their business.
CSS3 Multiple Columns Properties

The following table lists all the multiple columns properties:

Property Description CSS
column-count Specifies the number of columns an element should be divided into 3
column-fill Specifies how to fill columns 3
column-gap Specifies the gap between the columns 3
column-rule A shorthand property for setting all the column-rule-* properties 3
column-rule-color Specifies the color of the rule between columns 3
column-rule-style Specifies the style of the rule between columns 3
column-rule-width Specifies the width of the rule between columns 3
column-span Specifies how many columns an element should span across 3
column-width Specifies the width of the columns 3
columns A shorthand property for setting column-width and column-count 3


Related Videos