Not-So-Faux Columns

Creating a multi-column layout is often the first of many unsolveable puzzles that a novice web developer runs headlong into. It should be an easy thing to do, right? After all, two-column layouts are a standard in print, and you see them everywhere online. Alas, it’s not easy at all… in fact, it’s nearly impossible to make this layout without faking it. Nearly.

The Problem

In css, controlling height is often a big issue. For instance, making a Sticky Footer is another extremely common frustration dealing with height that should be far easier than it is. Interestingly, we often don’t have any issues controlling widths. So, why? The issue lies in the fact that, by default, html elements don’t expand to fit the height of a container, while they do with width*.

So, let’s say you want to have a website with two columns; one column for navigation, the other for content. In most cases, the content column is going to be longer than the navigation column, and it’s going to stretch the website container along with it. Unfortunately this will leave the navigation column all by its lonesome. If the navigation column has no background (or border!), there’s no problem–but if it does, your website is going to look a little lacking.

*Ok, not every element expands to fill width. The main point here is that no element, nor attribute, expands to fill height.

The Solution So Far

To solve this, the standard implementation that web developers have been using is called Faux Columns. The gist of the fake is pretty simple: use a repeatable background on the container to style the column that isn’t filling to the bottom. Because the container will expand to where the height-challenged column will not, this works.

But it’s a fake! And when there’s a fake, there’s a problem. For starters, the styling isn’t actually being applied to what it should be, and that rubs me the wrong way (flags about this being harder to understand, harder to maintain, and harder to change fly up in my head). A more tangible issue is that of borders, for you cannot apply a border to the short column and thus you are limited to border on the long one. Furthermore, the complexity of the stunt becomes unmanageable with 3+ columns in my opinion, as it requires the styling of two columns to be dependent on the container–or, of course, more markup.

The Better Solution

The better solution lies in understanding what I see as the two layers of css design and what attributes tweak them. The first layer is the Rendering layer, which is the layer that determines what the browser will render. Attributes such as background, padding, border, color, opacity, and most others deal with it. The second layer is the Layout layer, which is the layer that tells the browser where the elements are and how to react, and is mostly seen as the page flow. Attributes such as position, margin, float, and display tweak it. The problem with Faux Columns is that it tricks the rendering layer, but doesn’t trick the layout layer. But we will–in a pretty basic way, too:

To trick the rendering layer, we’ll use padding. To trick the layout layer, we’ll use margin.

Wait, what? Use two basic layout attributes to fix a complicated problem?! Yea, it seems fitting, doesn’t it? Here’s the code and a jsFiddle:

The HTML:

<div class="container">
	<div class="left">
		Left Text. Left Text. Left Text.
	</div>
	<div class="right">
		Right Text. Right Text. Right Text. Right Text.
	</div>
</div>

The CSS:

.container {
	position: relative;
	overflow: hidden;
}
.left, .right {
	float: left;
	padding-bottom: 9999px;
	margin-bottom: -9999px;
	width: 200px;
	background: white;
}
.right {
	background: skyblue;
}

Result (editable):

Left Text. Left Text. Left Text.
Right Text. Right Text. Right Text. Right Text.

You may be thinking that a solution using basic attributes and a pretty straight-forward DOM would have been thought up sooner, and you’d be right. My original search for something better than Faux Columns didn’t yield anything and no one in the office knew of anything better despite the many years of experience I was pooling from, so I spent a few hours coming up with this. Of course, once I knew specifically what to look and scan for, I found my solution already written up. One True Layout has already solved the issue with the same technique, and of course CSS-Tricks’ Chris Coyier includes that solution in his toolbox towards the bottom of the article on the issue.

Problems

The most glaring problem is that we’ve just set a static height on something that isn’t static. While you could extend the padding and margin to extremely high numbers, I would think there would be some performance ramifications. This alone makes me say that this solution isn’t anywhere near perfect, and is in fact a little ‘meh’. Other, more specific problems have been found by One True Layout such as printing in IE, Select+Scroll in extremely old gecko browsers, and linking to anchors. My uses of the technique aren’t complicated by these issues, so I haven’t tested if my solution is also plagued by these problems. If you’d like to test, please tell me what you find :-)

So, overall the solution is a little dodgy, almost like a bait and switch actually. But it is so much more real than the Faux Columns technique, and it isn’t trying to pull a fast one on you.

Enjoy!

This entry was posted in Blog. Post a comment or leave a trackback: Trackback URL.

One Trackback

  1. Posted January 19, 2013 at 5:02 pm | Permalink

    [...] brentgrossman.com/348/not-so-fuax-columns/ [...]

Post a Comment

Your email is never published, nor shared. Entering your website is optional, but good for networking!

*
*

Available HTML
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>