Tag: columns

Columnal – A responsive CSS grid system

A responsive CSS grid system helping desktop and mobile browsers play nicely together…
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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…
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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…
csshead 0 Comments