First order of business, the context surrounding primary content. Simply, this might include local and global navigation.
The issue here is the traditional means of using columns doesn't do well with little horizontal space, and simple linear layout doesn't take advantage of horizontal space when available.
I'm thinking it'd be cool if the sections could layout as centered normal flow. In this way when there was room, context would be right besid the content, centered in available space, much like columns. When room was scarce, the leading context would flow first, then content, then trailing context.
I'm thinking inline-block should work. Let's try.
<style type="text/css">
.page { text-align: center;}
.region { text-align: left; }
.region { display: inline-block; vertical-align: top; }
.highlight { border: 0.0625em dashed; }
</style>
<div class="page highlight">
<p>Page</p>
<div class="region highlight">Context Local</div>
<div class="region highlight">Content<br/>Here's some mighty fine content.<p>And a paraghraph even.</p><p>(And one more for good measure.)</p></div>
<div class="region highlight">Context Global</div>
</div>Page
And a paraghraph even.
(And one more for good measure.)
It works (for browsers that support inline-block of course)!
I think lists should be centered and not take up any more width than they need. By default, lists are blocks, so the take up all available width.
Can't use margin: auto; to center because it requires a specified (or intrisic) width.
I think the only way to pack
a block is to have it inline (inline-block), but that's not exactly what we want either becasue we want each list on its own line.
I can't think of a way to do this right now.
So, lists will take up all the width unless the list items are paragraphs (since we limit their width).