CSS3 column-count Property

Here is a brief description of how to specify the number of columns an element should be divided into, using the CSS3 property CSS3 column-count.

Explanation

Property :

column-count: number|auto|initial|inherit;


Where,
number - The optimal number of columns into which the content of the element will be flowed.
auto - Default value. The number of columns will be determined by other properties, like e.g. "column-width".
initial - Sets this property to its default value. Read about initial.
inherit - Inherits this property from its parent element.

Usage:


column-count: 3;

Definition:

The column-count property specifies the number of columns an element should be divided into.

Example :
<style>
.demodiv {
width:500px;
column-count: 3;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
}
</style>
<div class='demodiv'>
We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users.
If you are designing a website, then you can find all the resources you need for webmasters and web developers such as
free scripts, web tools, programming tutorials, web design and applications, clipart images, web icons etc.
Free website contents that help to develop, build, promote and maintain a web site.
</div>

Result:

We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users. If you are designing a website, then you can find all the resources you need for webmasters and web developers such as free scripts, web tools, programming tutorials, web design and applications, clipart images, web icons etc. Free website contents that help to develop, build, promote and maintain a web site.


Ask Questions

Ask Question