Ben Henick

Creating CSS2 Columns

c. Feb 2007

This subject is handled in exhaustive detail by my Opera Software Web Standards Curriculum article about headers, footers, columns, and templates.

Note: These stylesheet rules and markup conventions have been tested only in Firefox 2.0.0.1 for Windows and Internet Explorer 7. Untested browsers may witness unexpected results.

When you're using CSS to create a page layout that looks as if it was implemented with table markup, the reluctance of CSS to allow full-height columns in a layout with an arbitrary height is legendary.

What follows is a discussion of the hacks meant to work around that shortfall.

It's all about the background images.

The basic technique

While full height columns may be an insurmountable challenge in literal fact, we can use background images that will run down the full length of the page and thereby create the illusion of full-height columns.

In order to do this effectively, you need to know the width value for each of the columns in your design.

The columns themselves are arranged with the float attribute, and the background image made to correspond with those using the background-position attribute.

Two columns, proportional width

If I assume a layout with two columns of 30% width on the left and 70% width on the right, I need a container (which can be body) along with two other div elements, of which the first column will appear first in the source order.

Thus our CSS will look like this:

#container {
  background-image: url(/images/bg_vignette_fluid.gif);
  background-position: 30% 0;
}

#principal {
  float: right;
  width: 66%;
  margin-right: 2%;
}

#adjunct {
  width: 28%;
  margin-left: 1%;
}

Note: classes are used in preference to ids in the working markup, since this example is being repeated.

The result looks like this:

It was in Warwick Castle that I came across the curious stranger whom I am going to talk about.  He attracted me by three things: his candid simplicity, his marvelous familiarity with ancient armor, and the restfulness of his company - for he did all the talking. We fell together, as modest people will, in the tail of the herd that was being shown through, and he at once began to say things which interested me.  As he talked along, softly, pleasantly, flowingly, he seemed to drift away imperceptibly out of this world and time, and into some remote era and old forgotten country; and so he gradually wove such a spell about me that I seemed to move among the specters and shadows and dust and mold of a gray antiquity, holding speech with a relic of it!  Exactly as I would speak of my nearest personal friends or enemies, or my most familiar neighbors, he spoke of Sir Bedivere, Sir Bors de Ganis, Sir Launcelot of the Lake, Sir Galahad, and all the other great names of the Table Round.and how old, old, unspeakably old and faded and dry and musty and ancient he came to look as he went on!  Presently he turned to me and said, just as one might speak of the weather, or any other common matter -

"You know about transmigration of souls; do you know about transposition of epochs - and bodies?"

I said I had not heard of it.  He was so little interested - just as when people speak of the weather.that he did not notice whether I made him any answer or not. There was half a moment of silence, immediately interrupted by the droning voice of the salaried cicerone:

"Ancient hauberk, date of the sixth century, time of King Arthur and the Round Table; said to have belonged to the knight Sir Sagramor le Desirous; observe the round hole through the chain-mail in the left breast; can't be accounted for; supposed to have been done with a bullet since invention of firearms - perhaps maliciously by Cromwell's soldiers."

The ungentle laws and customs touched upon in this tale are historical, and the episodes which are used to illustrate them are also historical. It is not pretended that these laws and customs existed in England in the sixth century; no, it is only pretended that inasmuch as they existed in the English and other civilizations of far later times, it is safe to consider that it is no libel upon the sixth century to suppose them to have been in practice in that day also. One is quite justified in inferring that whatever one of these laws or customs was lacking in that remote time, its place was competently filled by a worse one.

The question as to whether there is such a thing as divine right of kings is not settled in this book. It was found too difficult. That the executive head of a nation should be a person of lofty character and extraordinary ability, was manifest and indisputable; that none but the Deity could select that head unerringly, was also manifest and indisputable; that the Deity ought to make that selection, then, was likewise manifest and indisputable; consequently, that He does make it, as claimed, was an unavoidable deduction. I mean, until the author of this book encountered the Pompadour, and Lady Castlemaine, and some other executive heads of that kind; these were found so difficult to work into the scheme, that it was judged better to take the other tack in this book (which must be issued this fall), and then go into training and settle the question in another book. It is, of course, a thing which ought to be settled, and I am not going to have anything particular to do next winter anyway.

Adding a footer

Placing a footer below these is a straightforward matter of using the clear attribute:

#footer {
  clear: both;
  padding: 10px;
  background-color: white;
}

Leaving us with this:

It was in Warwick Castle that I came across the curious stranger whom I am going to talk about.  He attracted me by three things: his candid simplicity, his marvelous familiarity with ancient armor, and the restfulness of his company - for he did all the talking. We fell together, as modest people will, in the tail of the herd that was being shown through, and he at once began to say things which interested me.  As he talked along, softly, pleasantly, flowingly, he seemed to drift away imperceptibly out of this world and time, and into some remote era and old forgotten country; and so he gradually wove such a spell about me that I seemed to move among the specters and shadows and dust and mold of a gray antiquity, holding speech with a relic of it!  Exactly as I would speak of my nearest personal friends or enemies, or my most familiar neighbors, he spoke of Sir Bedivere, Sir Bors de Ganis, Sir Launcelot of the Lake, Sir Galahad, and all the other great names of the Table Round.and how old, old, unspeakably old and faded and dry and musty and ancient he came to look as he went on!  Presently he turned to me and said, just as one might speak of the weather, or any other common matter -

"You know about transmigration of souls; do you know about transposition of epochs - and bodies?"

I said I had not heard of it.  He was so little interested - just as when people speak of the weather.that he did not notice whether I made him any answer or not. There was half a moment of silence, immediately interrupted by the droning voice of the salaried cicerone:

"Ancient hauberk, date of the sixth century, time of King Arthur and the Round Table; said to have belonged to the knight Sir Sagramor le Desirous; observe the round hole through the chain-mail in the left breast; can't be accounted for; supposed to have been done with a bullet since invention of firearms - perhaps maliciously by Cromwell's soldiers."

The ungentle laws and customs touched upon in this tale are historical, and the episodes which are used to illustrate them are also historical. It is not pretended that these laws and customs existed in England in the sixth century; no, it is only pretended that inasmuch as they existed in the English and other civilizations of far later times, it is safe to consider that it is no libel upon the sixth century to suppose them to have been in practice in that day also. One is quite justified in inferring that whatever one of these laws or customs was lacking in that remote time, its place was competently filled by a worse one.

The question as to whether there is such a thing as divine right of kings is not settled in this book. It was found too difficult. That the executive head of a nation should be a person of lofty character and extraordinary ability, was manifest and indisputable; that none but the Deity could select that head unerringly, was also manifest and indisputable; that the Deity ought to make that selection, then, was likewise manifest and indisputable; consequently, that He does make it, as claimed, was an unavoidable deduction. I mean, until the author of this book encountered the Pompadour, and Lady Castlemaine, and some other executive heads of that kind; these were found so difficult to work into the scheme, that it was judged better to take the other tack in this book (which must be issued this fall), and then go into training and settle the question in another book. It is, of course, a thing which ought to be settled, and I am not going to have anything particular to do next winter anyway.

These paragraphs are excerpts from the opening of A Connecticut Yankee in King Arthur's Court, by Mark Twain (1889).

...Column heights change, CSS doesn't

And if we redact the second paragraph of the left column, the full-height column appears to be preserved:

It was in Warwick Castle that I came across the curious stranger whom I am going to talk about.  He attracted me by three things: his candid simplicity, his marvelous familiarity with ancient armor, and the restfulness of his company - for he did all the talking. We fell together, as modest people will, in the tail of the herd that was being shown through, and he at once began to say things which interested me.  As he talked along, softly, pleasantly, flowingly, he seemed to drift away imperceptibly out of this world and time, and into some remote era and old forgotten country; and so he gradually wove such a spell about me that I seemed to move among the specters and shadows and dust and mold of a gray antiquity, holding speech with a relic of it!  Exactly as I would speak of my nearest personal friends or enemies, or my most familiar neighbors, he spoke of Sir Bedivere, Sir Bors de Ganis, Sir Launcelot of the Lake, Sir Galahad, and all the other great names of the Table Round.and how old, old, unspeakably old and faded and dry and musty and ancient he came to look as he went on!  Presently he turned to me and said, just as one might speak of the weather, or any other common matter -

"You know about transmigration of souls; do you know about transposition of epochs - and bodies?"

I said I had not heard of it.  He was so little interested - just as when people speak of the weather.that he did not notice whether I made him any answer or not. There was half a moment of silence, immediately interrupted by the droning voice of the salaried cicerone:

"Ancient hauberk, date of the sixth century, time of King Arthur and the Round Table; said to have belonged to the knight Sir Sagramor le Desirous; observe the round hole through the chain-mail in the left breast; can't be accounted for; supposed to have been done with a bullet since invention of firearms - perhaps maliciously by Cromwell's soldiers."

The ungentle laws and customs touched upon in this tale are historical, and the episodes which are used to illustrate them are also historical. It is not pretended that these laws and customs existed in England in the sixth century; no, it is only pretended that inasmuch as they existed in the English and other civilizations of far later times, it is safe to consider that it is no libel upon the sixth century to suppose them to have been in practice in that day also. One is quite justified in inferring that whatever one of these laws or customs was lacking in that remote time, its place was competently filled by a worse one.

These paragraphs are excerpts from the opening of A Connecticut Yankee in King Arthur's Court, by Mark Twain (1889).

Adding a third column

In order to add a third column, we only need to add two more elements - one to contain the third column, and a second to contain any two adjacent columns.

What we'll do is create a new left column and move the existing left column to the right, putting a list of chapters in the new left column.

Our source order now looks like this:

  • Global Container
    • Interior container
      • Center (main) column
      • Right (prologue) column
    • Left (ToC) column

Note: The markup of the elements from the two column presentation are preserved in the interior container.

The global container doesn't need any stylesheet rules, but now we're changing our column widths as follows:

  • Left: 20%
  • Center: 50%
  • Right: 30%

This leaves us with the following CSS width values before gutters are taken into account:

  • Interior container: 80%, floated right
  • Center column: 63%, or five eighths; floated left
  • Right column: 37%, properly rounded and enforced through application of a left margin

The left column takes up the balance of the layout.

So here's the resulting CSS:

#outerContainer {
  background-image: url(/images/bg_3column_1.gif);
  background-position: 20% 0;
}

#container {
  float: right;
  width: 78%;
  background-image: url(/images/bg_3column_2.gif);
  background-position: 63% 0;
}

#principal {
  float: left;
  width: 61%;
}

#adjunct {
  width: 35%;
  float: right;
  margin-right: 1%;
}

#moreAdjunct {
  margin-right: 82%;
}

Note: The stylesheet selectors used in the working markup have been altered slightly to account for the fact that this presentation is published in a particular context.

Three-column layout results

It was in Warwick Castle that I came across the curious stranger whom I am going to talk about.  He attracted me by three things: his candid simplicity, his marvelous familiarity with ancient armor, and the restfulness of his company - for he did all the talking. We fell together, as modest people will, in the tail of the herd that was being shown through, and he at once began to say things which interested me.  As he talked along, softly, pleasantly, flowingly, he seemed to drift away imperceptibly out of this world and time, and into some remote era and old forgotten country; and so he gradually wove such a spell about me that I seemed to move among the specters and shadows and dust and mold of a gray antiquity, holding speech with a relic of it!  Exactly as I would speak of my nearest personal friends or enemies, or my most familiar neighbors, he spoke of Sir Bedivere, Sir Bors de Ganis, Sir Launcelot of the Lake, Sir Galahad, and all the other great names of the Table Round.and how old, old, unspeakably old and faded and dry and musty and ancient he came to look as he went on!  Presently he turned to me and said, just as one might speak of the weather, or any other common matter -

"You know about transmigration of souls; do you know about transposition of epochs - and bodies?"

I said I had not heard of it.  He was so little interested - just as when people speak of the weather.that he did not notice whether I made him any answer or not. There was half a moment of silence, immediately interrupted by the droning voice of the salaried cicerone:

"Ancient hauberk, date of the sixth century, time of King Arthur and the Round Table; said to have belonged to the knight Sir Sagramor le Desirous; observe the round hole through the chain-mail in the left breast; can't be accounted for; supposed to have been done with a bullet since invention of firearms - perhaps maliciously by Cromwell's soldiers."

The ungentle laws and customs touched upon in this tale are historical, and the episodes which are used to illustrate them are also historical. It is not pretended that these laws and customs existed in England in the sixth century; no, it is only pretended that inasmuch as they existed in the English and other civilizations of far later times, it is safe to consider that it is no libel upon the sixth century to suppose them to have been in practice in that day also. One is quite justified in inferring that whatever one of these laws or customs was lacking in that remote time, its place was competently filled by a worse one.

The question as to whether there is such a thing as divine right of kings is not settled in this book. It was found too difficult. That the executive head of a nation should be a person of lofty character and extraordinary ability, was manifest and indisputable; that none but the Deity could select that head unerringly, was also manifest and indisputable; that the Deity ought to make that selection, then, was likewise manifest and indisputable; consequently, that He does make it, as claimed, was an unavoidable deduction. I mean, until the author of this book encountered the Pompadour, and Lady Castlemaine, and some other executive heads of that kind; these were found so difficult to work into the scheme, that it was judged better to take the other tack in this book (which must be issued this fall), and then go into training and settle the question in another book. It is, of course, a thing which ought to be settled, and I am not going to have anything particular to do next winter anyway.

  1. Camelot
  2. King Arthur's Court
  3. Knights of the Table Round
  4. Sir Dinadan the Humorist
  5. An Inspiration
  6. The Eclipse

These paragraphs are excerpts from the opening of A Connecticut Yankee in King Arthur's Court, by Mark Twain (1889).

Rendering problems: three proportional columns

Thoughtful testing of the preceding layout reveals breakage under the following circumstances.

  • The column outside #container must be shorter than the tallest column within #container. This problem arises because it is counterproductive to assign height: 100% to #container; in order for that approach to work, the height of #outerContainer would need to be defined in a discrete fashion. A workaround for this is to create a script that reads the pixelHeight value of #outerContainer and works that into a height value for #container.
  • Even if one of the columns within #container is the longest on the page, Internet Explorer 7 forces a gutter between any paragraphs in that longest column and the bottom of #container. There are two possible workarounds for this problem. The first is to assign a CSS selector to each final paragraph, create an Internet-Explorer-only styleshheet, and assign a negative bottom margin to that element, e.g., #container p.end { margin-bottom: -1.333em; } (or something similar). The second is to use div in place of paragraphs, specifically to accommodate this issue.

Closing thoughts

This demonstration clearly proves that while proportional two- column layouts are no particular challenge, expanding to three proportional columns is a challenge requiring more than a few hacks and/or compromises.

In the latter case it is almost universally preferable to adhere to fixed-width three-column layouts (which all but the tiniest minority of project sponsors would find acceptable), or to refrain from applying borders and/or background colors to more than one column in the layout (that column which is adjacent to #container in this scenario).

Finally, it should be noted that as CSS3 achieves currency in production useragents, column support will be greatly enhanced beyond the hackery described in this article.

Update, Feb. 2008

Kimberly Blessing brought to my attention that by assigning an explicit height (even auto) to a container, all floated child elements given a height of auto would themselves expand vertically to fill the space available.