CSS column-width Property

The column-width property defines the width of columns. If the width of the box is narrower than the specified value, the width of the single column will be smaller than the specified column width. It has two values: auto and length. "Auto" is the default value of the column-width property. "Length" specifies the width of columns by px, em and ch.

Some property extensions are added, such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera, etc.

Initial Value auto
Applies to Block containers except table wrapper boxes.
Inherited No.
Animatable Yes. The border and width are animatable.
Version CSS3
DOM Syntax object.style.columnRuleWidth = "5px";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      -webkit-column-width: 80px; /* Chrome, Safari, Opera */
      -moz-column-width: 80px; /* Firefox */  
      column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Column-width property example</h2>
    <p>Here the width f the column is set to 80px.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Values

Value Description
auto The width of the column is specified by the browser.
This is default value.
length The width of columns is specified by length.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

50.0
-webkit-
12.0
-webkit-
50.0
+ 11.5 -moz-
3.0
-webkit-
11.1 +

Practice Your Knowledge

Which is the default value of the CSS column-width Property?




Related articles