Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Multi-column Layout in CSS3

This article will cover the HTML CSS3 Multi-Column functionality. I will demonstrate the functionality by giving some examples and explain different properties.

Introduction:

Using CSS3 you can create multiple column easily and quickly. CSS3 allow to create design in multi column and display the content in those columns. Think that you have large screen like news paper if text line is as long as the full Screen than it create problem to read. So to overcome this problem and to use maximum screen we use CSS3 multiple column properties. This Is not possible with CSS and HTML until forcing column break at point of desired position, or using heroic script etc.

Properties of CSS3 Multi column

There are following properties of CSS3 multi column.

  • Column Count
  • Column Width
  • Column Gap
  • Column Rules
  • Column Span

Column Count

This tags specifies that how many numbers of column will appears or divided into.

Listing 1: This is the simple script to use column count

<!DOCTYPE html>
<html>
<head>
<style> 
.divide
{
-moz-column-count:5; 
-webkit-column-count:5; 
column-count:5;
}
</style>
</head>
<body>
<div class="divide">
<strong> Using CSS3 you can create multiple column easily and quickly. CSS3 allow to create design in multi column and display the content in those columns. Think that you have large screen like news paper if text line is as long as the full Screen than it create problem to read. So to overcome this problem and to use maximum screen we use CSS3 multiple column properties. This Is not possible with CSS and HTML until forcing column break at point of desired position, or using heroic script etc. </p>
</div>
</body>
</html>
The above figure shows that  the paragraph is divided into five columns.

Figure 1: The above figure shows that the paragraph is divided into five columns.

Column Width:

Column width is used in place of column count. In below my code I am using 200px. So it will set all columns 200px wide. According to set pixels browser calculate that how many column are fit for this width and then create columns. Example is given below:

Listing 2: This is the simple script to create column using width.

<!DOCTYPE html>
<html>
<head>
<style> 
.divided
{
-moz-column-width:200px; 
-webkit-column-width:200px; 
column-width:3;

-moz-column-gap:40px;
-webkit-column-gap:40px; 
column-gap:40px;
}
</style>
</head>
<body>
<div class="divided">
<p>Using CSS3 you can create multiple column easily and quickly. CSS3 allow to create design in multi column and display the content in those columns. Think that you have large screen like news paper if text line is as long as the full Screen than it create problem to read. So to overcome this problem and to use maximum screen we use CSS3 multiple column properties. This Is not possible with CSS and HTML until forcing column break at point of desired position, or using heroic script etc.</p>
</div>
</body>
</html> 
The above figure is output  of columns using Column Width.

Figure 2: The above figure is output of columns using Column Width.

Column Gap:

Column gap specify that how much distance occur between the two columns . You cannot specify it in negative.

Listing 3: This is the simple script for column gap property.

<!DOCTYPE html>
<html>
<head>
<style> 
.divided
{
-moz-column-width:200px; 
-webkit-column-width:200px; 
column-width:3;

-moz-column-gap:100px;
-webkit-column-gap:100px; 
column-gap:70px;
}
</style>
</head>
<body>
<div class="divided">
<p>Using CSS3 you can create multiple column easily and quickly. CSS3 allow to create design in multi column and display the content in those columns. Think that you have large screen like news paper if text line is as long as the full Screen than it create problem to read. So to overcome this problem and to use maximum screen we use CSS3 multiple column properties. This Is not possible with CSS and HTML until forcing column break at point of desired position, or using heroic script etc.</p>
</div>
</body>
</html> 
In above figure gap is applied between columns, you can see more gap now

Figure 3: In above figure gap is applied between columns, you can see more gap now.

Column Rules:

If you want to create rules between the columns than you can. This property specifies width, color and style of the rule between columns. These rules have same property as normal boarder.

Listing 4: Script of column rules

<!DOCTYPE html>
<html>
<head>
<style> 
.divide
{
-moz-column-width:200px;
-webkit-column-width:200px; 
column-width:200px;

-moz-column-gap:100px; 
-webkit-column-gap:100px;
column-gap:100px;

-moz-column-rule:6px outset black; 
-webkit-column-rule:6px outset black; 
column-rule:4px outset black;
}
</style>
</head>
<body>
<div class="divide">
<p>Using CSS3 you can create multiple column easily and quickly. CSS3 allow to create design in multi column and display the content in those columns. Think that you have large screen like news paper if text line is as long as the full Screen than it create problem to read. So to overcome this problem and to use maximum screen we use CSS3 multiple column properties. This Is not possible with CSS and HTML until forcing column break at point of desired position, or using heroic script etc.</p>
</div>
</body>
</html>
In above figure you can see the rules between the columns.

Figure 4: In above figure you can see the rules between the columns.

Column Span:

This property supported only in opera and also support in chrome an alternative. This property specify that how many column an element should be span.

Listing 5: Syntax of column span

column-span: 1|all;
Browser Support:

Internet Explorer does not support multi column property. Safari, Mozilla and Chrome support this property.

Conclusion :

Multi-column is new to CSS3, This property ease work of structuring the content. Please go through the steps provided in this document and if you have any question, please comment



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login