Wolf’s Little Store

Let’s say you want to create this: a box with rounded corners, that contains a few paragraphs, divided into theree columns. Sounds like a simple task, no? As any webdesigner can tell you: it’s not. And worse, there’s no way to do it automatically.

I’m not going to bore you with all the details about floating and clearing, or how to do it. I just wanted to give you a little glimpse into the future. Click here to see the result. You need to use Firefox or Safari, and preferably a recent version, to see what I’m talking about.

This is the CSS:

#mozspecific-showoff {
font-size: 11px;
line-height: 1.2;
font-family: Arial, sans-serif;
background: #F1F5FA;
padding: 10px;
border: 1px solid #DDD;

/* Divide into three columns */
-moz-column-count: 3;
-webkit-column-count: 3;

/* Give the div rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

The markup is just a div with a few paragraphs inside. As you can see, these properties make some of the key points where current CSS support is lacking a hell of a lot easier.

• Category: webdesign
• Back to the overview