HTML/CSS (slash JS?) 3-column layout

Question

Imagine I wanted to have a single <span> with stuff inside that has its text/contents split into three columns of as equal height as possible. How can this be done?

Answer 1

it's the CSS3 column layout . currently, it's supported via vendor tags. a sample can be seen in this article of webkit's site where there is a 2-celled div created from a single div only.

Answer 2

Matthew James has a very nice article about flexible, multiple-column layouts that work even in older browsers.

Edit: Just tested it in IE6 quirks mode and it still looks beautiful!

Answer 3

May be this?

span {
  columns: auto 3;
  -moz-column-rule: auto 3;
  -webkit-column-rule: auto 3;
  max-height: 100px;
}