CSS3 column-span Property

Here is a brief description of how to specify how many columns an element should span across using the CSS3 column-span property.

Explanation

Property :

column-span: 1|all|initial|inherit;


Where,
1 - Default value. The element should span across one column.
all - The element should span across all columns.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


column-span: all;

Definition:

The column-span property specifies how many columns an element should span across.

Note:Firefox and Internet Explorer 9 (and earlier versions) do not support the column-span property.
Example :
The below example sets the width, style, and color of the rule between columns.
<style>
.demodiv {
width:500px;
width:500px;
column-count: 3;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-rule: 3px dotted indigo;
-webkit-column-rule: 3px dotted indigo; /* Chrome, Safari, Opera */
-moz-column-rule: 3px dotted indigo; /* Firefox */
}
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
</style>
<div class='demodiv'>
<h3> Welcome to hscripts.com </h3>
We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users.
Free website contents that help to develop, build, promote and maintain a web site.
</div>

Result:

Welcome to hscripts.com

We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users. Free website contents that help to develop, build, promote and maintain a web site.


Ask Questions

Ask Question