Artists' Multi-Column Layout

© 2011, Martin Rinehart

Not really an "artists" page, this is a typographer's page showing CSS3 multi-column layout. Stretch this page from narrow to wide and you get one to three columns. (Columns don't yet appear in browsers written in the state of Washington. Sorry.) Send your frontend engineer to the note at the bottom of the page if you want to use this new capability.

Heading 2

Mea tantas tincidunt theophrastus ex, te quem illum complectitur eum, in usu veniam facilis dignissim. Congue vivendum liberavisse sea in. Ei labore dolores nec, vitae nusquam est at. Admodum definiebas pri id. At mel inermis accusamus intellegebat, has no torquatos deseruisse, ex mel dicta solet laboramus. Quas volumus rationibus his ex.

Te vel modus euismod, aliquid detraxit persecuti sea an. Tation splendide pri et. Vis ad iuvaret eleifend facilisis, ad est aeterno oblique aliquam. Pri omnium habemus iracundia in, mentitum definitiones ne has, an vel prima illum appellantur. An duo prima suscipit eleifend.

Per et graece electram. Ei alia habeo mnesarchum eam, sed scriptorem voluptatibus et. Graecis tincidunt ut pro, et quo ponderum facilisis. Et pri putant sensibus, eirmod option pro et. Cu nam dicunt volutpat, at sit sale oratio, enim referrentur pro et.

Heading 3

Ei labitur ceteros qui, error molestie ne mea. Et has agam debet tractatos. Audire menandri vel eu. Mei et impetus maiestatis, mei ea elit patrioque. Mea et ludus doming feugiat, liber praesent ei duo.

Alii apeirian ius te, nam cu stet dolore ullamcorper. Ut dicunt causae aliquam per, te eos stet erant dolorum. Sed cu quodsi invidunt, sea disputando reformidans eu, mutat scripserit complectitur et eos. No sed prima nostrud, alii recteque intellegebat vim cu.

Heading 3

Pri illum utamur in. Est perfecto salutatus adipiscing an, mei no case forensibus, cu alienum vituperata mei. Sed cetero viderer consequuntur ei, no vocent impetus qui, minimum percipit suavitate ad sit. Et eripuit imperdiet suscipiantur cum.

Another H2

Ut eam commodo admodum adipiscing, omnes putent appellantur ut duo. Pro an sonet graece prompta. Ei idque tempor tamquam vim, legimus posidonium ei usu, oporteat atomorum eloquentiam ei vim. Quis duis instructior an usu, te sit ignota explicari necessitatibus. Vix nobis detracto ex.

Heading 3

Legere eligendi deserunt vel id, ea ridens fastidii postulant eos. Est eu omnis nusquam. Te odio affert vix, nam an delenit offendit sententiae. Eum copiosae probatus ex, doming everti commodo et nam. Vis malorum eripuit consequuntur ad, partem dolores omittantur no cum.

Assum dissentias theophrastus eum te, eum te vituperata concludaturque, pri sale everti ex. Augue dignissim argumentum qui ei, probatus legendos oportere ex ius. In per graeci adversarium necessitatibus, labitur pericula ne mei. Periculis signiferumque per in. Ea quem argumentum deterruisset cum. Vis te munere perfecto aliquando, ne hendrerit consequat delicatissimi per.

Heading 3

Quo at populo labore labores, corpora molestie percipitur usu an, ex diam feugait quaestio quo. Id modus conceptam nec, latine perfecto ex per, cu timeam neglegentur mei. Ut quod illum complectitur mei, ad erroribus elaboraret nam, est augue causae ne. Eu mea quodsi repudiandae, quo an feugiat salutandi dignissim. Inani meliore vel ex, errem suavitate pri cu.

No usu libris detracto, pro ut sumo facilisis honestatis, duo ad illum tempor. Quo eu facer debet voluptua. Semper denique scriptorem vis ex, vel ex commodo prompta pertinacia. Ea vis aliquip maiorum, cu mel ipsum dicam. Facer omnes pri ei, sit te munere graeci mnesarchum, eum delectus placerat at. Cum et vitae menandri, vel nonumy torquatos ad. Cum stet dolorem senserit at, mea equidem oporteat ad.

Fuisset albucius quo ne. Tritani eripuit temporibus ne vel. Nam esse elitr homero ea. Ei debitis tacimates mea, per ea ancillae indoctum temporibus. Et ullum detraxit duo, pri omnes ignota dissentiunt ex, ad per elitr homero principes.


Engineering

CSS3 makes this dead simple. Warning: All the things you find on the web re this capability go on endlessly about adjusting column widths, putting lines between columns and so on. Ignore all this. Your browser vendors have made intelligent choices for the defaults. Trust them. You just say:

selector {column-count: n}

Where n is the number of columns you want. Almost.

Actually, column-count works in Opera. -webkit-column-count works in Chrome and Safari and -moz-column-count works in Firefox. (In JavaScript use columnCount, WebkitColumnCount and MozColumnCount, respectively.)

Wrinkle: One of the three above selectors handles elements after the multi-column element very nicely. Another is only half nice. Opera is braindead about this. Add: margin-bottom: 1em to your multi-column element(s) and all will be well.

Creases: widow and orphan control does not exist (yet). You didn't expect that your <Hn> elements would have a "keep with next" feature, did you?

Feedback: MartinRinehart at gmail dot com

# # #