mozilla

Revision 299959 of columns

  • Revision slug: CSS/columns
  • Revision title: columns
  • Revision id: 299959
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The columns CSS property is a shorthand property allowing to set both the {{ cssxref("column-width") }} and the {{ cssxref("column-count") }} properties at the same time.

  • {{ Xref_cssinitial() }} {{ Cssxref("auto") }} for both properties
  • Applies to non-replaced block-level elements (except table elements), table cells, and inline-blocks elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} specified value for the column-count part, the length for the column-width part

Syntax

columns: <column-count> || <column-width>

where :

<column-width>
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.
<column-count>
Is a strictly positive {{ xref_cssinteger() }} describing the ideal number of columns into which the content of the element will be flowed. If the {{ cssxref("column-width") }} is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

Examples

.content-box {
  border: 10px solid #000000;
  columns:3;
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Multicol', '#columns', 'columns') }} {{ Spec2('CSS3 Multicol') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }} 9 (9){{ 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

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>columns</code> <a href="/en/CSS" title="CSS">CSS</a> property is a shorthand property allowing to set both the {{ cssxref("column-width") }} and the {{ cssxref("column-count") }} properties at the same time.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("auto") }} for both properties</li>
  <li><dfn>Applies to</dfn> non-replaced block-level elements (except table elements), table cells, and inline-blocks elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> <a href="/en/CSS/specified_value" title="specified value">specified value</a> for the column-count part, the length for the column-width part</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
columns: &lt;column-count&gt; || &lt;column-width&gt;
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    &lt;column-width&gt;</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;">
    &lt;column-count&gt;</dt>
  <dd style="margin-left: 40px;">
    Is a strictly positive {{ xref_cssinteger() }} describing the ideal number of columns into which the content of the element will be flowed. If the {{ cssxref("column-width") }} is also set to a non-<strong>auto</strong> value, it merely indicates the maximum allowed number of columns.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="eval">
.content-box {
  border: 10px solid #000000;
  columns:3;
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Multicol', '#columns', 'columns') }}</td>
      <td>{{ Spec2('CSS3 Multicol') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">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>9 (9){{ 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&nbsp;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 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
  <li>{{ CSS_Reference:Columns() }}</li>
</ul>
Revert to this revision