particulars

This is a transcript from a Facebook conversation regarding CSS columns that expand to full/equal vertical height:

Anon Friend March 1 at 3:48pm
FUCK THEM OMGOMGOMG I”M GONNA USE A TABLE

Thank you, I needed that.

Mimi Flynn March 1 at 3:55pm
NO!!! DON’T DO IT!!!

Anon Friend March 1 at 3:58pm
See comment I just posted: http://www.entertainingcode.com/archives/the-broken-web/

The linked article seems absolutely right to me.

Mimi Flynn March 1 at 4:02pm
i’m really starting to wonder what you’re trying to do. I’m filled with suggestions, but nothing to reference.

Anon Friend March 1 at 4:08pm
I need two columns side-by-side (1 px border between them), left one with background color A, right one with background color B. Thus they both need to be the same height, i.e. the smaller one needs to vertically expand to be the same height as the larger one. See the article linked from Hacker News for the various ways to do this without tables, none of them remotely good.

Or maybe I should just say “the web doesn’t really support this” and design appropriately, i.e. just let the left sidebar be small, a little parasitic attachment on the main content area, the right column. That’s philosophically attractive, but, damn, the web *should* support basic multi-column layout.

Mimi Flynn March 1 at 4:17pm
Is these columns nested inside of a larger div? you could make the larger div the smaller column’s background color and position the other column in such a way that none of that color shows around it.

so:

<div style="background: #0f0;clear:both;overflow:hidden;border:1px solid #000;
width:300px;">
<div class="short column" style="float:left; width:100px;">
column stuff
</div>
<div class="tall column" style="float:left; background:#f00;width:200px;">
lots more column stuff to make it a longer column lots more column stuff to make
it a longer column lots more column stuff to make it a longer column
</div>
</div>

Anon Friend March 1 at 11:16pm
I’m almost certain there’s a reason that won’t work for my situation (like I’ve been down that road before) but I look forward to investigating more in the morning. I’ll let you know. Thank you!

In the meantime: what’s the intent of the clear:both and overflow:hidden in your outer div?

Mimi Flynn March 2 at 8:09am
clear:both; will clear the floats of the inner divs in some browsers

overflow:hidden; reminds the browser to wrap the outer div around the floated contents (thus, bringing the background color down to the bottom of the tallest column) instead of it just staying up around the top. If you didn’t use this the first time you tried this method, you probably didn’t see the background of the outer div under the shorter column.

Anon Friend March 3 at 12:37pm
Oh no, once you let tables in just a little bit, it’s too late, they take over everything! They’re like Satan putting his foot inside the door.

Mimi Flynn March 3 at 1:23pm
i knew it… another win for Satan… damn.

Its a common problem for beginners, really.

In a 2004 article for A List Apart, Dan Cederholm approached this common question:

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

In a time when HTML code was shifting from tables to HTML and CSS for style, this became a common issue.

A little more advanced…

Recently, while working on new project, I’ve been wondering how I can get multiple columns to match in height when the content is dynamic. I knew that jQuery could stretch scroll-down menus horizontally to the width of the longest item, so, I did a quick search and found an EqualHeights plugin, which, funnily enough, linked to the above article in A List Apart.

You can see the finished product at yellowtrenchcoat.com. Each list-item height is set to the tallest item in the unordered list.