column-width

  • Revision slug: CSS/column-width
  • Revision title: column-width
  • Revision id: 27864
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 2 words added

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: non-replaced block-level elements (except table elements), table cells, and inline-blocks 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') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }} 1.5 (1.8){{ property_prefix('-moz') }} 10 11.1 3.0 (522){{ property_prefix('-webkit') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

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: non-replaced block-level elements (except table elements), table cells, and inline-blocks 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>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td> <td>1.5 (1.8){{ property_prefix('-moz') }}</td> <td>10</td> <td>11.1</td> <td>3.0 (522){{ property_prefix('-webkit') }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li><a href="/en/CSS_Reference" title="CSS Reference">CSS Reference</a></li> <li>{{ Template:CSS_Reference:Columns }}</li>
</ul>
Revert to this revision