mozilla
Your Search Results

    column-width

    Summary

    The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.

    • Initial value auto
    • Applies to non-replaced block elements (except table elements), table-cell or inline-block elements
    • Inherited no
    • Media visual
    • Computed value the absolute length, zero or larger
    • Animatable yes, as a length
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: <length> | auto
    
    column-width: auto;
    
    /* Different <length> values */
    column-width: 6px;
    column-width: 25em;
    column-width: 0.3vw;
    
    column-width: inherit;
    

    Values

    <length>
    Is a <length> 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 column-count.

    Examples

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

    Specifications

    Specification Status Comment
    CSS Writing Modes Module Level 3
    The definition of 'column-width' in that specification.
    Candidate Recommendation Adds intrinsic sizes via the keywords min-content, max-content, fill-available and fit-content.
    CSS Multi-column Layout Module
    The definition of 'column-width' in that specification.
    Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (Yes)-webkit 1.5 (1.8)-moz 10 11.1 3.0 (522)-webkit
    Intrinsic sizes Not supported Not supported Not supported Not supported Not supported
    on display: table-on, display: table-caption (Yes) 37 (37) (Yes) (Yes) (Yes)
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support (Yes) 1.0 (1.8)-moz (Yes) (Yes) (Yes)
    Intrinsic sizes Not supported Not supported Not supported Not supported Not supported
    on display: table-on, display: table-caption (Yes) 37.0 (37) (Yes) (Yes) (Yes)

    See also

    Document Tags and Contributors

    Last updated by: jsx,