An Almost Complete Guide to CSS3 Multi-column Layouts

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…

VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)

The Multi-Column CSS3 Module

For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that – again – no support in Internet Explorer. But that’s okay! The world will not end if IE users see one longer paragraph. I’ll show you how to use this helpful module in today’s video quick tip…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Purely CSS – Faking Different Color Columns

We want to create a layout with two columns, each a different color, yet have both colors extend the the edge of the browser. This is a technique intended for people that want a multi-colored column fixed width eg. 960px layout.

The secret behind this technique is an 3000 pixel width background image don’t worry about file size – it’s only 360 bytes. This image will be the background of the element that contains our two columns. Since it extends beyond even a 30″ resolution 2560 pixels wide, it will effectively fill in the gaps in color between the edges of our two columns and the edge of the browser window…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Remembering: The CSS3 Multi-Column Layout Module

Because I will not shut up about CSS3, this time I’ve decided to show you a little bit of the multi-column layout module. This module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Equal Height Columns – Companion Columns Method

The search for a technique that offers real equal height columns leads nowhere because we don’t have full vertical control in current CSS 2.1 implementations cross browser. The available techniques are simulations of columns: a repeated image displaying Faux Columns [Cederholm], columns made of borders [Livingstone], and variations.

We couldn’t even fall back on a (CSS-)table, since there is no broad, sufficient implementation of display: table in the browsers. And a table would dismiss the accessibility request for having the columns logically ordered in the source.

OneTrueLayout [Robinson] uses a promising technique [Challoner] where the columns are still not equal in height, but they are cut in length, so they appear as-if. Surprisingly, this trimming made problems that are not solved.

In this article, we draw up a variation for the equal heights columns illusion, standing on the shoulders of OneTrueLayout. Both techniques use excessive padding and compensating negative margins, a tricky concept…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Create Sidebars of Equal Height with Faux Columns

CSS can sometimes be a tricky business. There are times when even the simplest of layouts take some serious brainstorming! One of those frustrating times is when you want to create a series of columns of equal height, but the content in one column might be longer than the next. Here’s where the Faux Column technique steps in, let’s take a look at how this solution can make even the most complicated layout a breeze to code up…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Really Simple CSS Trick for Equal Height Columns

This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS properties position:absolute and border. Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Multi-column layout with CSS3 and some JavaScript

There’s a common newspaper and print layout method where the text of an article is arranged over several columns. This makes the article easer to read and looks quite nice visually. Wouldn’t it be great if you could do this with CSS? Well, in fact this is perfectly possible using the multi-column layout module that is part of the CSS3 specification. Whilst browser support for this is patchy, the module is approaching candidate recommendation status, and the method can still be implemented using proprietary but well-supported CSS rule prefixes like -moz- and -webkit- in your style sheets. For browsers that do not support the multi-column layout module in any form, there’s a useful JavaScript solution…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Faux Columns – Equal height columns with CSS

“How do you get the right column’s background color to extend all the way down the page?”

It’s a simple concept. One that many of you may already be familiar with. But for those who aren’t, the following technique can be a handy little trick…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)