Post
Ask Question

CSS3 Series Part 3: Multi Column Layout With CSS3

Introduction

 
Hello all, welcome to Part 3 of the CSS3 series. In our previous article, we learned about various kinds of background properties. I strongly recommend reading the following previous parts. Here, in this article we'll discuss a new feature offered by CSS3, Multi Column Layout. A Multi Column Layout is a new feature to arrange your text just like a news article published in a newspaper as shown below (just for an example).
 
 
As we can see in the preceding image, how nicely the article is presented in 4 columns with some style and a heading “Self Control is the key to success”. We'll learn all these things in this article with the Multi-Column Layout. We can also represent our text in this format. Currently, the Multi-Column Layout is only supported by the following browsers:
  • Mozilla Firefox
  • Google
  • Safari
Currently, there's no support for this feature in Internet Explorer and the Opera browser. Please find the following table for Multi Column Layout properties.
 
Property Name Description
Column-count Specifies the number of columns paragraph should be divided.
Column-rule Shorthand property column-rule properties.
Column-rule-color Set color of the rule between columns.
Column-rule-style Set style of the rule between columns.
Column-rule-width Set width of the rule between columns.
Column-width Specify the width of the columns.
Column-gap Specify the gap between the columns.
Column-span Specify how many columns an element should take.
 
Let's see each of the preceding properties with an example to make the concept clear. First we'll create 4 columns using the "column-count" property as shown in the following code.
  1. div  
  2. {  
  3.     background-color:#f2f2f2;  
  4.     height:300px;  
  5.     width:600px;  
  6.     font-weight:bold;  
  7.     border:2px dotted #333;  
  8.     padding:10px;  
  9. }  
  10. .FourColumns  
  11. {  
  12.     -moz-column-count: 4;  
  13. }  
After execution of this code, a normal paragraph will be divided into 4 equal columns as shown in the following output.
 
 
If you want to divide your columns with a border then you can use the "column-rule-style" property as shown in the following example.
  1. .FourColumns{  
  2.     -moz-column-count: 4;  
  3.     -moz-column-rule-style:dotted;  
  4.     column-rule-style: dotted;  
  5. }  
After the addition, our output will be like:
 
 
There're various kinds of border styles that you can use for your styling. Please find the following table for other "column-rule-style" values with sample border.
 
 
If you want to specify an amount for the gap between the columns, say a gap of 50px, you can use the "column-gap" property as shown in the following example.
  1. .FourColumns{  
  2.     -moz-column-count: 4;  
  3.     -moz-column-rule-style:dotted;  
  4.     -moz-column-gap:50px;  
  5.     column-rule-style: dotted;  
  6. }  
When you compare this output with the preceding one, you'll get the difference.
 
 
You can also add images to your paragraph as shown below.
 
 
Now, let's provide our article or our <div> content a Heading. To provide a heading or if you want to provide any title to your content then you can use the "column-span" property. Note: Firefox doesn't support this property. So here, we'll run our code in Google Chrome. Let's look at an example:
  1. h1{  
  2.     column-span:all;  
  3.     -moz-column-span:all;  
  4.     -webkit-column-span:1;  
  5. }  
This property has 2 values as shown in the following table.
 
 
We'll add a <H1> element under the <div> element. After running the code in the browser, we'll get the following output.
 
 
If you want to provide a vertical heading then you can set "column-span:all". After this, your heading will be shown in a vertical format.
 
 
Now, we'll discuss the last property of our article, in other words, the "column-rule" property. This property is used to set the width, style, and color of the column rule between columns.
  1. For e.g.  
  2. .FourColumns{  
  3.     -moz-column-rule: 3px dashed red;  
  4.     -webkit-column-rule: 3px double red;  
  5. }    
Now, when we run our code, we'll get an output of a column rule of style double that will be 3 pixels in width in Red color as shown in the following output.
 
 

Conclusion

 
So, in this article, we've learned how to create columns for any long paragraph, we've also learned various types of styling for our column rule in which we can create various types of column borders. We've also seen how to provide a specific amount of gap between columns and at last, we've seen how to provide a style to the column rule using the "column-rule" property. In our next article, we'll learn how to create a new background by mixing 2 or more colors and we'll also learn about various types of borders with which we can enhance the design of our web page. Until then keep learning. If there's any mistake in this article then please let me know. Please provide your valuable feedback and comments that enable me to provide a better article the next time.


Similar Articles