Columns property (columns)

The columns property is a shorthand property for column-width and column-count properties.

Syntax:

selector {

columns: auto | column-width column-count | initial | inherit;

}

Values:

Possible values for column-rule-style property are:

auto; The default value that sets "column-width" and "column-count" values to "auto (browser chooses)
column-width; Sets the width of the column (as described here).
column-count; Sets the numberof the columns (as described here).
initial, inherit

NOTE: Have in mind that the width and column will affect each other, for instance we cannot have too many columns if the width is also large, depending of course on the size of the parent containing element (see example below).

Example

Example for shorthand columns property:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; color:#444; 
    background-color:#eff;
  }
p {
    font-size:smaller;
  }
.column
 {
    columns: 150px 3;
        -webkit-columns: 150px 3; /* Chrome, Safari, Opera */
        -moz-columns: 150px 3; /* Firefox */
 } 
</style>
</head>
<body>

<h3>The column-rule-style property example:</h3>
<div class ="column">
In the 1995 Brendan Eich from Netscape started developing a client-side script called LiveScript that in combination with the server-side script called LiveWire would be a powerful tool in online scripting. Netscape partnered up with Sun Microsystems to complete the implementation of LiveScript. Due this partnership the name was changed from LiveScript to JavaScript so the companies can capitalize on the popularity that SM&rsquo;sJava had already been achieved.
</div>
  <p><strong>NOTE:</strong> Pay attention to relationship between width and count (within styles).
    They affect each other.</p>

</body>
</html>

›› go to examples ››

Columns property (columns)

Syntax:

Values:

Example

Example for shorthand columns property:

Comments

About

Contact

Get Connected