Fleagle

An (Almost) Complete Guide to CSS3 Multi-column Layouts

Filed September 20th, 2010 under An (Almost) Complete Guide and Web Technologies

One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case.

First of all, it’s generally easier to read lines of text between 8 and 12 words long. Second, it’s easier to control the amount of negative space in a layout with columns. For a long time, this was the primary advantage of print but CSS3 makes multi-column layouts possible online (and without the need for JavaScript).

W3C Specification: http://www.w3.org/TR/css3-multicol/

Browser Specific Support

WebKit support: Strong

Firefox support: Strong

IE9 support: None

The multi-column model

The WC3 specification introduces a number of new properties that allow us to define columns in HTML layouts. Just like print designs of old, we’re able to define the number of columns, column width, column gaps, and even rules governing overflow.

Essentially, the specification states that a multi-column element needs to have either a defined column width or column count. Browsers are supposed to render these elements similar to the way they render tables – but the content in a column layout is dynamically split into blocks.

At the moment, we’re not able to define certain properties about columns (like column-specific backgrounds), but it’s possible this might change.

The number and width of columns

column-count and column-width are the two most basic ways to define the properties of a multi-column element.

column-count

By default, column-count is set to auto. This means that if we explicitly define the column-width, the browser will sort out for itself how many columns are necessary to populate the content in the multi-column element. Obviously, that’s not always desirable so we’ll want to explicitly define the number of columns to span the content across. And it’s easy to do:

view source

print?

column-width

As I mentioned, we can define column-width without defining the number of columns, and the browser will render our content dynamically (there are some fine controls available too – keep reading for those). To define column-width, we can use any of the units regularly available to CSS properties (em, px, %, etc).

view source

print?

Of course, we can always combine column-width and column-count:

view source

print?

Column gaps and rules

All print designers are familiar with column widths and gaps, but web designers are addicted to the language of margins and padding.

But column gap is exactly as it sounds – the size of the space between columns defined in any unit regularly available in CSS (em, pixel, etc).

column-gap

The WC3 specification defines 1em as the default column-gap value, so we’ll use it in this example:

view source

print?

column-rule

Column rule is another throwback to the print era. Basically, column rules are thin lines between the columns, to further aid readibility and/or to distinguish between separate stories. CSS3 gives us three different properties for the column rule: column-rule-size, column-rule-style, and column-rule-color, but we can use the shorthand column-rule to declare values for all three at once.

As you might have guessed, the regularly available units, styles, and color values can all be used:

view source

print?

Column breaks

What if I want to break the column before an h3 tag, you ask? Well, that’s easy too. CSS3 gives us the column-break property with a number of possible related properties and values, including: auto, always, avoid, left, right, page, column, avoid-page, and avoid-column.

column-break

So if we want to break the content before every h3 tag we simply include the column-break-before property in our stylesheet:

view source

print?

Spanning columns

If we want an element, say a headline, to span across multiple columns we can make use of the new column-span property.

column-span

column-span has two possible values: all, and regular numbers (e.g. 1,2,3). Defining column-span as all means that the given element will span across the whole multi-column block, while assigning it a regular number will limit its span to that number of columns:

view source

print?

Filling columns

Just like print design, we might want some finer control over how columns are filled with content. CSS3 introduces column-fill to give us that kind of control.

column-fill

We can either define a value of auto or balanced. The former will sequentially fill columns with content, while the latter evenly distributes the content.

view source

print?

Demo!

To cap things off, I’ve created a quick demo project based on the first few paragraphs of Moby Dick. It should display correctly in both WebKit and Mozilla based browsers (though it’s not formatted properly for mobile).

Click here for a live preview or click here to download the project files.

Other Resources

Introducing the CSS3 Multi-Column Module by Cedric Savarese

Remembering: The CSS3 Multi-Column Layout Module by Web Designer Notebook

Joshua Kelly
Director of Human/Machine Synthesis

30 Comments

via kmsm.ca

Posted via email from Fleagle | Comment »

via vectips.com

Posted via email from Fleagle | Comment »

Much like the other various Envato marketplaces, our newly launched Tuts+ marketplace will offer a free file each month. For September, that free file/tutorial just so happens to mine! I’ll show you how to build a custom HTML5 video player with Flash fallback support.

Be sure to grab this one for free for the entire month of September. Next month, it’ll return to its original price.

Though the idea of a video-specific HTML element was suggested well over a decade ago, we’re only just beginning to see this come to fruition! Forget all of that “HTML5 2012” mumbo-jumbo; the truth is that you can use the video element in your projects right now! The only problem is that the video players are inconsistent from browser to browser, and full-screen support is, at the time of this writing, only available in certain browsers, via a right-click. Further, what if we want to brand our video player? Unfortunately, there isn’t an easy way to do so by default. The solution is to create a custom player that remedies all of these issues.

While we’re using a great deal of our Premium catalog to populate the new marketplace, it will quickly become dominated by unique tutorials, screencasts, and eBooks! Be sure to check it out if you haven’t already.

via feedproxy.google.com

Posted via email from Fleagle | Comment »

Are you ready to start freelancing full-time?

There’s no magic formula for freelancing readiness. The point at which each person feels ready is different, and will depend on their lifestyle, goals, discipline, and target market, as well as a myriad of other factors.

There are, however, indicators that can suggest you might be in a good position to strike out and do your own thing. These five factors were the signs that told me I was ready to try freelancing full time.

1. You have more work than you can handle … and you’re thrilled about it.

We all have busy periods. But if you’re staring down the barrel of an ongoing busy period that will see you working so hard that you’re thinking of outsourcing some work, taking leave from your day job, or somehow injecting another eight hours into every day — and these thoughts inspire and excite you — then you might be in a good position to start freelancing full time.

The question you’ll want to answer, though, is how long this busy period will last. Landing a big job won’t necessarily justify leaving your paid job, but if you have more work on the not-too-distant horizon, and feel confident it’ll eventuate, full-time freelancing might look more like a viable option and less like a pipe dream.

2. You can’t see how you can achieve your life and/or career goals while in salaried employment.

Some people simply itch to run their own businesses. Others long passionately for the freedom to work the hours they choose in an environment they choose. Some daredevils feel a burning desire to buck the trend and break with the usual working conventions.

If you’re one of these people — if you do not believe that salaried employment will allow you to fulfill your dreams or, alternatively, you believe it will actively prevent you from achieving those objectives — you may be ready to look seriously at alternatives like going it alone.

3. When you think of freelancing full time, you feel secure.

Security is a relative concept, and its definition varies from person to person. Some see security as a roof over their heads and a buffer in the bank; others believe it’s about family and friends; still others see it as self-belief or education or talent.

Obviously, making a big life or career change is likely to put you on your mettle. Just thinking about it might send adrenaline through your system and set your mind racing. But is that excitement the product of dread or enthusiasm? As you launch yourself into full-time freelancing, you may well feel nervous about getting enough work, paying the bills, and keeping your clients happy. All of us face those kinds of questions.

The things you don’t want to have to worry about are imminent financial issues, relationship problems, health worries, and so on. These kinds of issues are the things that can, ultimately, cause you to throw in the towel when the freelancing fight is barely begun. If you feel secure in yourself and your life in a broader sense, you’ll be more likely to be able to cope with the stresses and concerns you’ll undoubtedly feel as you find your feet as a full-time freelancer.

4. You’ve talked it over with the people who matter.

The people who matter aren’t just your loved ones, or those who will bear the brunt of any impacts that your career change has on your broader life — though of course you’ll be talking your plans over with them! But perhaps you’ll also want to talk to your clients, peers, and freelancing friends. Perhaps you’ll also decide to discuss your plans with your bank manager, financial planner or accountant.

The people who matter include anyone whose opinion or advice is valuable to you. While I’m not saying that you should only go out on your own if others give you ‘permission’, trusted advisors can give you insights, suggestions, and help that can make the transition smoother and more successful than if you make the decision in a vacuum. If you’ve talked to the people who matter, and their advice has cemented your belief that you can succeed as a full-time freelancer, you may be in a good position to get started.

5. You feel ready.

No one has reliable secrets for freelance success. No one can say whether you’ll truly enjoy full-time freelancing — enough to stick at it through the tough times and make a success of your adventures. No one knows what’s in store for your future, and whether freelancing will remain compatible with the turns your life takes.

But if you feel wholly ready to try full-time freelancing, it won’t matter: you’ll want to give it your best shot. Whether your freelance career lasts five weeks or fifty years, you’ll know that you gave it everything you could, without hesitation, doubt, or half-heartedness. And while I can’t guarantee you won’t have any regrets, I’m pretty sure that, whatever happens, you’ll know you embarked on full-time freelancing wholeheartedly, for the right reasons.

These were the key signs that told me I was ready to try freelancing full time. What other indicators would you look for?

Image by stock.xchng user lusi.

Related Posts

• Three Strategies for Managing Social Networks and a Full-Time Job
• How to Manage Postpurchase Dissonance in Your Freelance Clients
• 99designs Launches Ready-made Logo Store
• End Game: What’s Beyond This Gig?
• How Failing to Compete Can Help You Succeed

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: business startup, freelance, goal setting, small business

« Previous in Category

• Share this on del.icio.us
• Digg this!
• Share this on Reddit
• Stumble upon something good? Share it on StumbleUpon
• Share this on Facebook
• http://b2l.me/anwp5f+” title=”Tweet This!” rel=”nofollow”>Tweet This!
• Subscribe to the comments for this post?

Posted on September 2, 2010 in Web Pro Business. The views and opinions in this blog post are those of its author.

via sitepoint.com

I’m so not ready based on this.

Posted via email from Fleagle | Comment »