I met an engineer last week who, like me, is among the CSS-geeky. Upon discovering this shared ground, he asked if I knew the answer to an age-old puzzler: how to, using just HTML and CSS, put a fixed-width column on one side of a page and have a fluid column fill the rest of the width. (In other words, a navigation or sidebar column that’s ___px wide, and a main-content column that is as wide as the rest of the space.)

This comes up often because, as much as we all may sincerely speak of separating presentation and content, CSS still has profound limits in what it enables. Putting fixed and fluid side by side is a big one.

I couldn’t give him an answer I really liked. I usually solve that problem by leaving padding on the fluid column and absolute-positioning the fixed column in the padding, but that brings risks of the fixed-width content exceeding the page depth if the fluid content is shorter. You can add JavaScript to constantly calculate the width of the fluid column, but that’s an expense, especially considering that you’d have to constantly recalculate on window resize. We bantered a little about applying CSS table properties, but given some of the wonkiness with that in older browsers, I’ve been hesitant to rely on that technique.

Maybe it’s time to be bold, because table properties is one of the two fine solutions for a fixed-plus-fluid layout suggested by Radiating ★ Star, the other being adding a negative margin to the 100%-width fluid container, which is offset by a positive margin on an inner container. Both solutions have tradeoffs: requirements for the parent container and lack of support in old IE for the first solution, the addition of a non-semantic container for the second one. But they’re both more elegant than absolute positioning. And maybe we’ll someday see CSS catch up to this common real-world need and make fixed and fluid columns work together without the extra hoops.