Let’s Bring faux-column to CSS

by Cosmo Catalano

If you’ve ever built anything from the ground up with HTML/CSS you know the issue: <div> only expands vertically to fit its contents. Put some of those <div> tags side by side to make columns and chances are, they’ll end up hanging awkwardly above where you want them to be.

The cannonical fix is the Faux Column, a slender, repeating image in the background behind the columns, colored to match the <div> elements that don’t quite make it to the bottom of the screen.

the uneven columns problem

The uneven columns problem. Honk if you’ve dealt with this.

While this works well enough, I’m decidedly against using image kludges (don’t get me started on font image replacement…), and I resent having to make the round-trip through Photoshop every time I want to resize, when effects as complex as box-shadow and animations can be dictated cleanly and semantically with stylesheets.

There are also Javascript fixes, but…I dunno man. Feels like cheating—and that’s not an empty criticism. HTML elements work the way they do for a specific reason, and monkeying around with that won’t help you understand them any better, and might set up future conflicts.

I don’t want to come across as purist, and I won’t fill you with hot air about non-Javascript browsers or act like jQuery isn’t a great fix for dynamic or more complex layouts, but something as basic as a 2- and 3-column layouts should be, well, basic.

What I propose is a faux-column CSS variable, that, much like the faux column image, is applied to the background of the div containing the wish-they-were-even columns. It’d look a little something like this:

#container {
   height: 100%;
   width: 650px;
   faux-column: 200px #333, 300px #fff, 150px #999;
}

#left-col {
   width: 200px;
   background: #666;
   float: left;
}  

#center-col {
   width: 300px;
   background: #fff;
   float: left;

}  
 
#right-col {
   width: 150px;
   background: #bbb;
   float: left;
}     

A brief rundown of the advantages this system would provide:

  • Semantic – browsers know these are background colors, not some who-knows-what image
  • Lower bandwidth, less server load, faster load times
  • Single-line fix – change the background element, not the various columns
  • Modify column widths with the text editor, not Photoshop
  • No risk of color profile mismatch
  • Respects default HTML/CSS function
  • No Javascript required