mozilla

Revision 27858 of column-width

  • Revision slug: CSS/column-width
  • Revision title: column-width
  • Revision id: 27858
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 382 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

Specification Status Comment
CSS Multi-column Layout Module Level 3 {{ Spec2('CSS3 Multicol') }}  

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>
<h2 name="Examples">Examples</h2>
<pre>.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}
</pre>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-multicol/#cw" title="http://www.w3.org/TR/css3-multicol/#cw">CSS Multi-column Layout Module Level 3</a></td> <td>{{ Spec2('CSS3 Multicol') }}</td> <td> </td> </tr> </tbody>
</table>
Revert to this revision