Print Media Style Column Layouts

Article 1

columns: 20em;

The css above tells the formatter that the optimal line length is 20em, and that the number of columns should be computed accordingly. Thus, on a small screen you will have one column, on a wider screen two columns, etc. In effect, multi-column layout automatically creates the optimal number of connected regions needed to display the content.

To have the entire document in the same set of columns, the columns can be set on the body element.

At one fell swoop This ring was mine, I gave it his first wife. Indeed, my lord, The melancholy Jaques grieves at that; And, in that kind, swears you do more usurp Than doth your brother that hath banish'd you. A miserable world! As I do live by food, I met a fool, Who laid him down and bask'd him in the sun, And rail'd on Lady Fortune in good terms, In good set terms- and yet a motley fool.

Article 2

column-width: 12em;

The css above tells the formatter to have columns at least 12em wide. The exact number of columns will depend on the available space.

It is a wise father that knows his own child. He saves my labour by his own approach. Last scene of all, That ends this strange eventful history, Is second childishness and mere oblivion; Sans teeth, sans eyes, sans taste, sans every thing. Now in respect it is in the fields, it pleaseth me well; but in respect it is not in the court, it is tedious. I'll graff it with you, and then I shall graff it with a medlar. Then it will be the earliest fruit i' th' country; for you'll be rotten ere you be half ripe, and that's the right virtue of the medlar.

Article 3

column-count: 2;

The css above tells the formatter that the number of columns is fixed at 2 and the column widths will vary depending on the available width.

He has eaten me out of house and home. Why, how now, monsieur! what a life is this, That your poor friends must woo your company? What, you look merrily! Last scene of all, That ends this strange eventful history, Is second childishness and mere oblivion; Sans teeth, sans eyes, sans taste, sans every thing.

Yes, so please your Majesty. I did go between them, as I said; but more than that, he loved her-for indeed he was mad for her, and talk'd of Satan, and of Limbo, and of Furies, and I know not what. Take but good note, and you shall see in him The triple pillar of the world transform'd Into a strumpet's fool. Young man, have you challeng'd Charles the wrestler? He'll go along o'er the wide world with me; Leave me alone to woo him.

Article 4

columns: 2 12em;

The css above tells the formatter that both the number and width are set, respectively so the column count will never be more than 2 and the column width will never be narrower than 12em.

I must be cruel only to be kind. When I did hear The motley fool thus moral on the time, My lungs began to crow like chanticleer That fools should be so deep contemplative; And I did laugh sans intermission An hour by his dial. O noble fool! A worthy fool! Motley's the only wear. And then the lover, Sighing like furnace, with a woeful ballad Made to his mistress' eyebrow. Last scene of all, That ends this strange eventful history, Is second childishness and mere oblivion; Sans teeth, sans eyes, sans taste, sans every thing. But doth he know that I am in this forest, and in man's apparel? Looks he as freshly as he did the day he wrestled?

Article 5

column-gap: 1em; column-rule: thin solid black;

The first declaration in the example above sets the gap between two adjacent columns to be 1em. Column gaps are similar to padding areas. In the middle of the gap there will be a rule which is described by the column-rule property.

This ring was mine, I gave it his first wife. To hide us from pursuit that will be made After my flight. O unhappy youth! Come not within these doors; within this roof The enemy of all your graces lives. A miserable world! As I do live by food, I met a fool, Who laid him down and bask'd him in the sun, And rail'd on Lady Fortune in good terms, In good set terms- and yet a motley fool. Speak you so gently? Pardon me, I pray you; I thought that all things had been savage here, And therefore put I on the countenance Of stern commandment. At first the infant, Mewling and puking in the nurse's arms; Then the whining school-boy, with his satchel And shining morning face, creeping like snail Unwillingly to school. Hast any philosophy in thee, shepherd?

Article 6 and Lorem ipsum to make a heading long enough to span several columns

div { column-fill: balance }

h2 { column-span: all }

In this example, columns are set to be balanced, i.e., to have approximately the same length. Also, h2 elements are set to span across all columns.

By the pricking of my thumbs, I will no longer endure it, though yet I know no wise remedy how to avoid it. Indeed, my lord, The melancholy Jaques grieves at that; And, in that kind, swears you do more usurp Than doth your brother that hath banish'd you. But, poor old man, thou prun'st a rotten tree That cannot so much as a blossom yield In lieu of all thy pains and husbandry. I thank it. More, I prithee, more. I can suck melancholy out of a song, as a weasel sucks eggs. More, I prithee, more. And why, sir, must they so?