Revision 27856 of column-width

  • Revision slug: CSS/column-width
  • Revision title: column-width
  • Revision id: 27856
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 106 words added, 87 words removed

Revision Content

Summary

The column-width CSS property suggests an optimal column width. It can be let to the decision of the browser or a length can be suggested.

  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Applies to: block-level elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the absolute length

Syntax

column-width: length        or
column-width: auto 

where :

length
Is a {{ Xref_csslength() }} value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.
auto
Is a keyword indicating that the width of the column should be determined by other CSS properties, like {{ cssxref("column-count") }}.

Examples

.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}

Specifications

Browser compatibility

Browser Lowest Version Support of
Internet Explorer 10 column-width
Firefox (Gecko) 1.5 (1.8) -moz-column-width
Opera 11.1 column-width
Safari (Webkit) 3.0 (522) -webkit-column-width

See also

{{ CSS_Reference:Columns() }}

{{ languages( { "ja": "ja/CSS/-moz-column-width" } ) }}

Revision Source

<h2>Summary</h2>
<p>The<code> column-width </code>CSS property suggests an optimal column width. It can be let to the decision of the browser or a length can be suggested.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> <li>Applies to: block-level elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the absolute length</li>
</ul>
<h2 name="Syntax">Syntax</h2>
<pre class="eval">column-width: <em>length</em>        or
column-width: auto 
</pre>
<p>where :</p>
<dl> <dt style="margin-left: 40px;"><strong><em>length</em></strong></dt> <dd style="margin-left: 40px;">Is a {{ Xref_csslength() }} value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.</dd> <dt style="margin-left: 40px;"><strong>aut</strong><strong>o</strong></dt> <dd style="margin-left: 40px;">Is a keyword indicating that the width of the column should be determined by other CSS properties, like {{ cssxref("column-count") }}.</dd>
</dl>
<h3 name="Examples">Examples</h3>
<pre>.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-multicol/#column-width">CSS 3 Multi-column layout #column-width</a> Working draft</li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>10</strong></td> <td><code>column-width</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.5</strong> (1.8)</td> <td><code>-moz-column-width</code></td> </tr> <tr> <td>Opera</td> <td><strong>11.1</strong></td> <td><code>column-width</code></td> </tr> <tr> <td>Safari (Webkit)</td> <td><strong>3.0</strong> (522)</td> <td><code>-webkit-column-width</code></td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Columns() }}</p>
<div class="noinclude"> <p>{{ languages( { "ja": "ja/CSS/-moz-column-width" } ) }}</p>
</div>
Revert to this revision