Columns with CSS Properties and less Aggravation

If you are using IE to view this page; you are out of luck. You will have to switch to Firefox 1.5 if you want to see what modern browsers can do by supporting advanced properties that enhance the user experience.

This little tutorial is about columns in text. At this writing that requires Firefox 1.5; though others are sure to follow. So that this:

Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis. Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci. A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci.
becomes:

By now you are saying: That is really ugly. Why would anyone do that? Well no one should do that. The presentation is like a newspaper does, but it lacks the additional typesetting controls that are necessary. So we need to add some controls using another new property added for columns -moz-column-gap to give us this for the code:

We can make it even more newpaper like with the addition of justified text, which is one of my least favorite CSS property values.

It would look better with a line between the columns and there is a column-rule property that is not yet supported by even Firefox. They will give us that eventually. Until we get it we will just have to make do.

Ooops! I hear some yelling out there What if I have to support various screen sizes or use a dynamically sized container? I will need to specify the width of the columns. The number of columns that will fit in the space available will not always be the same. Quite right and we are prepared for it. Instead of specifying the columns we will set a column width:"

It Does not seem to work for percentage widths but we should not need that. However, the gap will take a percentage, and we probably need to be careful with that:

It looks okay but wth gap will vary based on resolution, and screen size. I prefer to fix the gap width in pixels to get the separation I want. The separation is the key to making it readable.

Now a little caution from an old dinosaur who has been burned by adopting new things too quickly sometimes. There are a few of problems associated with using this new feature; including:

1. IE does not support it and so IE users will get a single wide column, that may or may not be acceptable.
2. It uses the -moz- prefix because it is non-standard, at this time. The actual standard version may or may not be the same syntax, so to avoid maintenance problems put it in the stylesheets; never inline.
3. If you use it your clients may insist that you try and come up with a way to so it in IE... LOTSA LUCK!!