Floats vs. Column-Count

If your website contains a heavy amount of information, chances are that you’d benefit from having a multi-column design. You’ll be able to fit all of your information in sizable chunks without having the user scroll endlessly. Question is, how do you employ a multi-column design?

There are two ways to accomplish this: 1) you can use multiple tags and float them next to each other; or 2) you can use CSS3 column-count styling to set the number of columns you want for a certain block of text. Let’s examine the pros and cons of each.

Float Styling

Pros: Float styling has been around for a while, and so this particular style has a lot of browser support (even Internet Explorer 4.0+ supports it!), so you can be rest assured that anything you style with floats will work on almost everyone’s browser.

Cons: Floats—when it comes to creating multiple columns for text—are rather impractical. If your content doesn’t change often it’s not too bad, but if you know you’re going to be changing around your text a lot floated <div>s will quickly become a hassle to deal with. Adding or subtracting text can make your columns look weirdly uneven, and so you might have to go back and update your spacing so that it doesn’t break your design.

Column-Count Styling

Pros: One <div> tag styled with column-count is MUCH easier to maintain than multiple <div> tags styled with floats. This style automatically adjusts your content to fit into the multiple columns so adding or subtracting content is no problem.

Cons: This is still a relatively new style (just introduced with CSS3) and so there is not a whole lot of browser support for it. If your target audience includes those who don’t necessarily keep up with the latest browsers, chances are that column-count will not work in their browser, leaving your text as one huge block instead of your pretty multiple columns.


 

Conclusion: Which solution works best for you will most likely depend on who your target audience is. If you’re designing a website for an audience who are tech-saavy and like to use the latest and greatest technology, you’ll probably be safe using column-count styling for your content. However, if you’re designing a website for an audience that don’t use technology often (such as people 60 and older) or don’t have access to technology (such as people with low income), you want to avoid doing anything too fancy that is not supported by older browsers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s