Ben C wrote:
> On 2008-03-24, Jeff <jeff@spam_me_not.com> wrote:
> [...]
>> On a slightly different note:
>> I've always had trouble with the standard box model ignoring padding and
>> borders when accounting for widths, but you can do something like this:
>>
>> <div id="container">
>> <div id="column_1"> <!-- Set widths and margins-->
>> <div class="inside"><!-- Set padding and borders -->
>> content here
>> </div>
>> </div>
>>
>> <div id="column_2">
>> <div class="inside">
>> content here
>> </div>
>> </div>
>>
>> ...
>>
>> Now, widths and margins can be set for column_1 and column_2 (which
>> can be floated), and padding and borders can be set for "inside" using a
>> descendant of it's parent. If you adjust padding or borders (which is a
>> common design thing to do), then the width remains the same, you don't
>> have to go back and recalculate widths.
>>
>> Is anyone with me on this, or is there a flaw here?
>
> No flaw, I'd say that's the best way to set an outer margin width if
> that's what you want to do.
>
> Note that you put the margins on the outer box but the padding, borders
> and background on the inner one.
>
> You also can try CSS3 box-sizing: border-box or -moz-box-sizing:
> border-box.

My understanding is that the level of support is poor. You can take
it out of strict, but that exposes other issues. I hadn't heard of the
-moz-box-sizing but I'm pretty sure IE won't grok that.
>
> Purists will avoid divs that are only there so you can style them but
> that have no "semantic" meaning but in my opinion that's setting the bar
> too high.

And there's a place for that. But in the current commercial market it's
a real disadvantage for the author as it leads to real plain jane pages.
I've been a bit stunned by the use of background images in some layouts.
Zen Garden does that, but I think this can be done simpler with just a
few more containers just for styles.

http://www.mezzoblue.com/zengarden/alldesigns/

>
> Sometimes people propose more extensions to CSS to achieve results that
> can already be achieved using the existing rules and another level of
> nesting. But if you ask me it's not worth it. Simplicity is more
> important, and perhaps people underestimate how much more power there is
> in a simple set of rules if you allow yourself to create a few extra
> elements to apply them to.

It's not like nesting tables. And divs have no special symantic
meaning. I think your argument of simplicity (and consistency) carries a
lot of weight.

I've waited a long time to get a reasonable set of rules that apply
(more or less consistently) to most browsers. I'm not waiting longer or
just designing for a few browsers or writing CSS hacks to turn on/off
styles (if I don't have to).
>
> Note also that the order in which elements appear in the source document
> already dictates a lot about the layout, however you style it: it's not
> as if content and presentation are completely decoupled. It has become a
> bit of a mantra to claim that they are or should be but the reality is
> more subtle.

That's true. I haven't hacked my way through the wikipedia layout,
but they go through some severe measures to order the content. I'm
impressed. I'm also confused.

Ultimately where I want to go is a very small handful of layouts that
can be assembled to achieve whatever look you want. I think this can be
done with a slight variant of the above layout (perhaps in 1 to 4 column
variants) or perhaps with unused "columns set to display: none".

Thanks, I feel better about the path I'm headed down.

Jeff