CSS3 Multiple Columns

With the help of CSS3, we can create multiple columns. Here we discuss the following properties of multiple columns in CSS3

column-count

column-gap

column-rule

Note: Internet Explorer does not yet support the multiple columns properties.

Column Count: The column-count property specifies the number of columns that we want to divide.

<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.newspaper
{
-webkit-column-count:5; /* Safari and Google Chrome */
-moz-column-count:5; /* Firefox */
column-count:5;
}
</style>

</head>
<body>

<form id="form1" runat="server">
<div class="newspaper">

Lakshmi Narayan Mittal, the illustrious alumnus of St Xavier's College and currently the chairman & CEO of the ArcelorMittal group, has promised a hefty grant to his alma mater as a tribute for making him what he is. He is likely to pay nothing less than Rs 18 crore to help his college build a swanky hostel for at least 500 students. The new hostels will come up on a plot that the college already owns on AJC Bose Road. We already have an old building housing under 200 boys there, but times have changed and we need to upgrade these facilities," said Father Felix Raj, principal of the college.

If things go according to plans, the old building will be pulled down and two swanky towers will come up in its place. Design for the two towers has already been approved and this will be sent to Mittal along with the cost estimates needed to build them.....

</div>

Column Gap: The column-gap property specifies the gap between the columns.

.newspaper
{
-moz-column-gap:60px; /* Firefox */
-webkit-column-gap:60px; /* Safari and Chrome */
column-gap:60px;
}