For the new mindgarden layout I’m using the CSS3 module called Multi-column layout in combination with Media Queries.
This means that if you have your browser at a relatively small size you are presented with one regular content column. If you resize you browser window to more than 1008px though this changes and the column is split into two. For window sizes wider than 1440px the content is split into three columns reminding a bit of a newspaper layout.
the media query part
This is how the W3C spec (rather elaborately) describes media queries:
By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
Sounds more complicated than it really is. Here’s the CSS that I’m using for my layout:
Firstly I’m setting my default styling for my element.
.entry-content { ... }
Nothing unusual or surprising here. But then I want to specify some styling for larger window sizes.
@media all and (min-width: 70em) { .entry-content {... } }
I’m using “@media all” as I want to apply my rules to all output devices (screen, print, etc.). The min-width part is used so it only effects windows that have a minimum width of 70em.
Then I’m doing the same again for even larger windows.
@media all and (min-width: 100em) { .entry-content { ... }}
multi columns
So far so good. Now we have the means to differentiate between different browser sizes. Let’s use this to do some column-magic. Let’s add some style rules:
.entry-content {
font-size: 1.2em;
line-height: 1.8em;
color: #444;
}
Again, no surprises. Alas, here come the columns:
@media all and (min-width: 70em) {
.entry-content {
-moz-column-count: 2;
-moz-column-gap: 4em;
-webkit-column-count: 2;
-webkit-column-gap: 4em;
}}
First of all, notice the namespaces used for Firefox and Safari. CSS3 is not a finished standard yet and for the time being this is how browser manufacturers like to implement CSS3 features. If Opera supported the multi-column module there would be something like “-o-column” as well. Unfortunately this feature hasn’t made it into Opera 10.
Creating our columns is quite simple. column-count marks the number of columns specified and column-cap the with of the spacing between them. The available space is distributed accordingly. Notice how the copy text flows from one column to the next when you resize this browser window.
I could have uses column-width instead to get a fixed with for my columns. Then the browser would have generated the number columns for me. There’s also column-rule which I haven’t used. With column-rule you can create a border in between you columns.
@media all and (min-width: 100em) {
.entry-content {
-moz-column-count: 3;
-webkit-column-count: 3;
}}
For really large window sizes I’m adding another column here. I don’t have to repeat my rules for the column-gap because if my window is wider than 100em, it is also wider than 70em and those rules get inherited.
Done!
Safari cutting off the images
Unfortunately, Safari isn’t playing along entirely with my cutting-edge-css3-goodness-showcase. Browsers that don’t understand media queries or multi-columns will just degrade gracefully and show the one default column. Safari on the other hand will display the columns just fine as long as you don’t use images or embedded flash content.
If you use images or flash in your columns Safari sometimes has the nasty habit of cutting them in the middle and showing one slice in one column, the other in a second.
There’s already a ticket created for this in the webkit ticketing system So far I couldn’t a workaround for this so let’s hope it will get fixed soon.
No support for column-span
A good way to prevent the Safari bug from happening would be to use column-span that is part of the CSS3 spec. Similar to col-span for tables column-span would make it possible to say for example
h2 { column-span: all; background: silver }
(example from the W3C document)
Unfortunately column-span is not supported in any browser yet.
