Column width property (column-width)

The column-width property sets the width of the columns.

Syntax:

selector {

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

}

Values:

Possible values for column-width property are:

auto; This is default value and it lets browser define the width.
length; A length unit that specify the width of a column (pixels, ems…)
initial, inherit

Example

Example with the column-width property in paragraphs:

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

<h3>Column width set to 100px:</h3>
<div class ="column">
Imagine going to a website on the internet except you don't type in the URL (Universal Resource Locator) on your browser. Instead it's like calling someone on your rotary dial phone. To go to Yahoo, you dial 202.43.192.109 which is the site's IP address, including the dots, ... Now to get to other websites, you'd need one of those big heavy yellow pages and look them up alphabetically or by category. Tough, isn't it? That's where the Domain Name System or DNS comes in. If your cell phone has a contacts list you could choose from instead of remembering eleven-digit numbers, why not the Internet?
</div>

</body>
</html>

›› go to examples ››

Column width property (column-width)

Syntax:

Values:

Example

Example with the column-width property in paragraphs:

Comments

About

Contact

Get Connected