mozilla

Compare Revisions

Using CSS multi-column layouts

Change Revisions

Revision 51612:

Revision 51612 by BijuGC on

Revision 51613:

Revision 51613 by Takkaria on

Title:
Using CSS multi-column layouts
Using CSS multi-column layouts
Slug:
CSS/Using_CSS_multi-column_layouts
CSS/Using_CSS_multi-column_layouts
Tags:
css, CSS3, css3-multicol
css, CSS3, css3-multicol
Content:

Revision 51612
Revision 51613
n26      Two CSS properties control whether and how many columns wiln26      Two CSS properties control whether and how many columns wil
>l appear: <code>{{template.Cssxref("-moz-column-count")}}</code> >l appear: <code>{{ Cssxref("-moz-column-count") }}</code> and <co
>and <code>{{template.Cssxref("-moz-column-width")}}</code>.>de>{{ Cssxref("-moz-column-width") }}</code>.
n59      The exact details are described in <a class="external" hrefn59      The exact details are described in <a class="external" href
>="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">the CSS3 d>="http://www.w3.org/TR/css3-multicol/">the CSS3 draft</a>.
>raft</a>. 
n71      However, in some situations it is also useful to set the man71      However, in some situations it is also useful to set the ma
>ximum height of the columns explicitly, and then lay out content >ximum height of the columns explicitly, and then lay out content 
>starting at the first column and creating as many columns as nece>starting at the first column and creating as many columns as nece
>ssary, possibly overflowing to the right. For example, articles a>ssary, possibly overflowing to the right. For example, articles a
>t http://iht.com/ do this (using script). Therefore we extend the><a class=" external" href="http://iht.com/" rel="freelink">http
> draft so that if the CSS <code>height</code> property is set on >://iht.com/</a> do this (using script). Therefore we extend the d
>a multicolumn block, each column is allowed to grow to that heigh>raft so that if the CSS <code>height</code> property is set on a 
>t and no further before adding new column. This mode is also much>multicolumn block, each column is allowed to grow to that height 
> more efficient for layout.>and no further before adding new column. This mode is also much m
 >ore efficient for layout.
n77      By default each column is directly adjacent to the next coln77      By default each column is directly adjacent to the next col
>umn. This usually doesn't look good. You can use CSS padding with>umn. This usually doesn't look good. You can use CSS padding with
>in the columns to improve the situation, but it's often easier to>in the columns to improve the situation, but it's often easier to
> apply the <code>{{template.Cssxref("-moz-column-gap")}}</code> p> apply the <code>{{ Cssxref("-moz-column-gap") }}</code> property
>roperty to the multicolumn block:> to the multicolumn block:
n105      {{wiki.template('CSS_Reference:Columns')}}, <a href="en/CSSn105      {{ CSS_Reference:Columns() }}, <a href="en/CSS_Reference">C
>_Reference">CSS Reference</a>, <a href="en/CSS_Reference/Mozilla_>SS Reference</a>, <a href="en/CSS_Reference/Mozilla_Extensions">C
>Extensions">CSS Reference:Mozilla Extensions</a>>SS Reference:Mozilla Extensions</a>
n111      <li>http://weblogs.mozillazine.org/roc/archives/2005/03/gecn111      <li>
>ko_18_for_we.html 
112        <a class=" external" href="http://weblogs.mozillazine.org
 >/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http:/
 >/weblogs.mozillazine.org/roc/a...18_for_we.html</a>
t113    </ul>{{ wiki.languages( { "es": "es/Columnas_con_CSS-3", "fr"t114    </ul>{{ languages( { "es": "es/Columnas_con_CSS-3", "fr": "fr
>: "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/C>/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_C
>SS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } >olumns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}
>) }} 

Back to History