In this article I am explaining how to make different columns to a paragraph as like newspaper.
Column: The column module is use for creating multi-columns texts.
Column has many properties these are give below:
1. column-count: This property is divide into n numbers of column if we use the column-count:3;
that’s mean it will make three column and columns: will work same as column-count: columns:100px 3; means columns will make three column in 100 pixels of areas.
2. column-gap: This property is make the difference between columns, column-gap:100px; means this line will give the 100 pixels of gap between columns.
3. column-rule: This property will create a vertical line between the gaps of columns.
4. column-rule-style: This propertywillmake the vertical line in different pattern such as if we use the Dotted value the vertical line will shows in dotted format.
5. column-rule-width: This property will make the rule width.
6. column-width: This property will make the width of columns.
The current Mozilla implementation uses the special -moz- prefix, while the Safari implementation uses the special -webkit- prefix. In this page I used both this prefix.
Below code will make a HTML application using CSS3 which are making a paragraph in different three columns:
<! DOCTYPE html>
<html>
<head>
<style>
.newspaper
{
/*===============================================*/
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
columns:100px 3;
/*===============================================*/
-moz-column-gap:100px; /* Firefox */
-webkit-column-gap:100px; /* Safari and Chrome */
column-gap:100px;
/*===============================================*/
-moz-column-rule:3px outset #CD853F; /* Firefox */
-webkit-column-rule:3px outset #CD853F; /* Safari and Chrome */
column-rule:3px outset #CD853F;
/*===============================================*/
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
column-rule-style:dotted;
/*===============================================*/
-moz-column-rule-width:5px; /* Firefox */
-webkit-column-rule-width:5px; /* Safari and Chrome */
column-rule-width:5px;
/*===============================================*/
-moz-column-width:20px; /* Firefox */
-webkit-column-width:20px; /* Safari and Chrome */
column-width:20px;
/*===============================================*/
color:#CD853F;
}
p
{
font-weight:bold;
font-size:2em;
color:#CD853F;
}
</style>
</head>
<body>
<p><b>Note:</b> MindStick© News</p>
<div class="newspaper">
MindStick is a Microsoft ISV Gold certified software development company specializing in product development, programming and consulting services. Currently we have three software products named
MindStick Cleaner and MindStick Data Converter, MindStick Survey Manager which are available free of cost. Our extensive experience with enterprise software development in web, desktop and mobile has
Been a key to our customer’s success. Our global customers have successfully partnered with us in designing, developing and testing complex software products based on Microsoft’s latest
Technologies. MindStick also serves to developer and student communities by providing guidance and help via its development portal articles, blogs, and user groups, quiz and interview sections. We are proud to
partner with small, medium and enterprise size businesses worldwide.
</div>
<p><b>Note:</b> Internet Explorer does not support the column-count property.</p>
</body>
</html>
Note: This code will not support the IE.
Output:
Leave Comment