■ columns: 3 20em
■ columns: 10em(Sameascolumn-width: 10em; column-number: auto)
■ columns: 4 auto
Avoid Being Caught Short Using Firefox
Firefoxonlysupportsthe-moz-columns/columnsshorthand.Settingcolumn-
numberor-moz-column-numberwillfailtowork.Settingcolumn-widthdeterminestheoptimalsizeforeachcolumn.Itsvalueshould
beinlengthunits;forexample,column-width: 200pxorcolumn-width: 10em.
Percentageswillnotwork,anditsinitialvalueisauto.
“Optimal,”ofcourse,meansthatcolumn-widthsetstheidealwidth,notnecessarily
itsactualwidth.Columnsmaybewiderornarrowerdependingontheavailable
spaceand/orviewportsize.InFigure4.14,forexample,thecontaineris 760 pixels
wideandthecolumn-widthvalueis15em.Thatgivesusthreecolumns.
Figure 4.14. A multicolumn layout with column-width: 15em at a container width of 760pxComplex Layouts 149