Solution to the Liquid Layout Gutter Dilemma

Here's the problem: you've got a CSS layout, you are a "true believer" that websites should be flexible, but you're not sure how to get the padding into those columns—since width only counts the content, padding would make the layout more than 100% wide. (sometimes I'm not sure if the W3C got it right).

I've always thought there were just these two solutions:

1. Nest an extra "gutter" div and add your margins to that (which is what Dan does in Bulletproof Web Design). But then you're adding extra markup for presentational purposes (and doesn't that "nesting extra" just bring you back to the bad-old-days?)
2. Add margins to every single element within the column, which is what I've been doing until now. But it's really hard to anticipate every single potential element (trust me, I've tried).

After reading Dan's book and pondering this dilemma, that phrase "every single element" finally rang a bell; we have a selector that does exactly that! Here's the first part of the solution:

#sidebar * { margin: 1em 20px; }

That gives us 1em vertical margins (arbitrarily chosen) and 20px horizontal margins (those "gutters" that we're shooting for) on every paragraph, list, etc. within the container of id "sidebar". But we don't want the children of those elements to also have those margins (every link inside a paragraph, yuck!), so we add this rule:

#sidebar * * { margin: auto; }

which translates roughly into, "every element in the sidebar that's nested inside another element that's also in the sidebar, go figure out your own margins."

Here's the solution demo.