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