Multi-Column-Layout
The creative process can be a bit elusive at times, last week I decided to design a theme for the Get-Simple CMS. I wanted to go with a leather concept for the theme, but ended up with something much more simple and practical. After all, some of us practically live by the concept of “less is more”, when designing. In the process of keeping the design as minimal as possible without it being a vanilla page with a handful of images and text, I decided to use the multi-column-layout feature.
This is what the CSS looks like.
h3 + div
{
-moz-column-count:2;
-moz-column-rule-style:solid;
-moz-column-rule-color: #ccc;
-moz-column-rule-width: 1px;
-webkit-column-count:2;
-webkit-column-rule-style:solid;
-webkit-column-rule-color: #ccc;
-webkit-column-rule-width: 1px;
column-count:2;
column-rule-style:solid;
column-rule-color: #ccc;
column-rule-width: 1px;
text-align:justify;
font-size: 90%;
}
h4 + div
{
-moz-column-count:3;
-moz-column-rule-style:solid;
-moz-column-rule-color: #ccc;
-moz-column-rule-width: 1px;
-webkit-column-count:3;
-webkit-column-rule-style:solid;
-webkit-column-rule-color:#ccc;
-webkit-column-rule-width: 1px;
column-count:3;
column-rule-style:solid;
column-rule-color: #ccc;
column-rule-width: 1px;
text-align:justify;
font-size: 90%;
}
This feature dates back to an article written in 2005 by C.Savarese featured at A List Apart. Before I decided to write this post I did my research and found several hacks that require Javascript. The alternative with CSS is to create “div” containers, which requires more CSS code. At this stage, do you really want to go through all of those changes for something as simple as multi-column-layouts? If you’re taken IE (any version to date) into consideration, you have no choice.
Seven years later CSS3 is widely supported and this feature works in all browsers with the exception of IE9 and lower. In spite of all the progress that IE has made over the last two years, this is one of the many little quirks that leaves front-end developers dissatisfied. The good news is that IE10 does support this, but is still in beta status. Will IE ever be up to speed with flow of technology?