This is an example of a simple multi-column class.You can also set the column-width (with prefixes) but it generally makes more sense to let it auto calculate that. The rule ("rule", as in, a line) will split the gap down the middle. You can use the same values as you would a border. Take care not to have your text blocks be so enormously tall that they are taller than a (fairly small) browser window, otherwise it's the same problem as text being wider than the browser window (scrolling back and forth to read = sucks). Also consider Important Point:Also note this demo tool and html /css sample code is using moz and webkit vendor prefixes, should only work in Gecko (Firefox 1.5+, et al.) and Webkit (Safari 3+, Chrome, et al.) browsers. No native support in Internet Explorer or Opera .There are some javascript hacks for Ie and opera compatibility. Luckily, there is a workaround. You can use the following JavaScript-file to obtain exactly the same behavior in Explorer: http://www.csscripting.com/css-multi-column/. while the usage of more modern browsers are on the rise. Internet Explorer 10 is included in this. Developing for the modern browsers, while making sure that people with older browsers can still use the site, is a fine approach by me.