CSS Property column-width

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

We can use column-width to keep your columns at a specific width.

Summary

Initial value: auto
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.columnWidth="100px"
Animatable: yes

CSS Syntax

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

Property Values

auto: Default value. column width is determined by the browser
length: length sets the width of the columns
initial: sets to default value
inherit: Inherits this property from its parent element

Browser compatibility


`column-width`	Yes	10.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--   w  ww .j a  v a  2 s.  c o  m-->
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    -moz-column-width: 100px; /* Firefox */  
    column-width: 100px;
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ullamcorper suscipit lobortis nisl 
ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate 
velit esse molestie consequat, vel illum dolore eu feugiat 
nulla facilisis at vero eros et accumsan et iusto odio 
dignissim qui blandit praesent luptatum zzril delenit augue 
duis dolore te feugait nulla facilisi. Nam liber tempor cum 
soluta nobis eleifend option congue nihil imperdiet doming 
id quod mazim placerat facer possim assum. Typi non habent 
claritatem insitam; est usus legentis in iis qui facit eorum 
claritatem. Investigationes demonstraverunt lectores legere 
me lius quod ii legunt saepius.
</div>

</body>
</html>

Click to view the demo

Example 2

The following code shows how to use column-width to create tag layout.

<!DOCTYPE html>
<html class='ng-app'>
<head>
<style>
.example {<!--from w  ww .  j a v  a 2  s  .c om-->
  -webkit-column-width: 120px;
  -moz-column-width: 120px;
  column-width: 120px;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

.tag {
  text-decoration: none;
  display: block;
  background: white;
  color: #333;
  padding: 0.3em 0.75em;
  border-radius: 0.2em;
  margin-bottom: 0.5em;
}
.tag:hover {
  background: #34495e;
  color: white;
}
</style>
</head>
<body>
<ul class="example">
  <li><a href="#" class="tag">ipsum</a></li>
  <li><a href="#" class="tag">dolor</a></li>
  <li><a href="#" class="tag">sit amet</a></li>
  <li><a href="#" class="tag">consectetuer</a></li>
  <li><a href="#" class="tag">adipiscing</a></li>
  <li><a href="#" class="tag">elit</a></li>
  <li><a href="#" class="tag">aliquam</a></li>
  <li><a href="#" class="tag">tincidunt</a></li>
  <li><a href="#" class="tag">mauris</a></li>
  <li><a href="#" class="tag">eu risu</a></li>
  <li><a href="#" class="tag">vestibulum</a></li>
  <li><a href="#" class="tag">auctor</a></li>
  <li><a href="#" class="tag">dapibus neque</a></li>
  <li><a href="#" class="tag">vulputate</a></li>
  <li><a href="#" class="tag">turpis</a></li>
  <li><a href="#" class="tag">duis</a></li>
  <li><a href="#" class="tag">ornare</a></li>
  <li><a href="#" class="tag">lacus</a></li>
  <li><a href="#" class="tag">magna</a></li>
  <li><a href="#" class="tag">vitae</a></li>
  <li><a href="#" class="tag">tincidunt</a></li>
  <li><a href="#" class="tag">leo</a></li>
  <li><a href="#" class="tag">elementum</a></li>
  <li><a href="#" class="tag">sed posuere</a></li>
  <li><a href="#" class="tag">metus</a></li>
  <li><a href="#" class="tag">pellentesque</a></li>
  <li><a href="#" class="tag">mattis</a></li>
</ul>   
</body>
</html>

Click to view the demo