CSS3 column-width Property

Here is a brief description of how to specify column width using the CSS3 property column-width.

Explanation

Property :

column-width: auto|length|initial|inherit;


Where,
auto - Deafult value. The column width will be determined by the browser.
length - A length that specifies the width of the columns.
initial - Sets this property to its default value. Read about initial.
inherit - Inherits this property from its parent element.

Usage:


column-width: 100px;

Definition:

The column-width property specifies a suggested, optimal width for the columns.

Example :
<style>
.demodiv {
width:500px;
column-count: 3;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
-webkit-column-width: 200px; /* Chrome, Safari, Opera */
-moz-column-width: 200px; /* Firefox */
column-width: 200px;
}
</style>
<div class='demodiv'>
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:

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