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.
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.