Re: [css3-page] Styling elements differently based on whether they appear on a left or right page

Alan Stearns wrote:

 > >Also sprach Brad Kemper:
 > >
 > > > >  http://people.opera.com/howcome/2013/02-reader/
 > > > > 
 > > > > What would be your preferred ways of coding, say, the first of these?
 > > > 
 > > > I've nothing against doing that sort of layout like that, where you
 > > > have evenly sized and spaced columns and everything is to fit
 > > > within even multiples of those columns.
 > >
 > >That's good. Still, my question stands: how would you code these sorts
 > >of layouts using your preferred methods -- what would the code look like
 > >in
 > >flex box or grid?
 > 
 > There is an example of the holy grail layout in the flexbox spec that has
 > two sidebars the same height as the article using a flex container.
 >
 > Since the topic at hand is sidebars, what about reversing your question?
 > How would you accomplish the sidebar layout Brad is talking about? 

The one with sidebars differing on left/right pages? The code example I gave is here:

  http://people.opera.com/howcome/2013/tests/css3-gcpm/sidenote.pdf
  http://people.opera.com/howcome/2013/tests/css3-gcpm/sidenote.html

Or, are you asking about the holy grail, like the one Brad referred to?:

  http://d.alistapart.com/holygrail/example_1.html

Here's a float-based alternative:

  http://people.opera.com/howcome/2013/tests/hg-float.html

Using flexbox is fine, too. Or CSS tables. 

 > What would the code look like with float:outside/inside? Let's have
 > a paginated layout with an article and a sidebar, where the sidebar
 > paginates along with the article columns. When the sidebar content
 > ends, the height should either be the viewport height (if the
 > article continues on another page) or the height of the final
 > fragment of the article (if the article and sidebar finish on the
 > same page).

You're adding a bunch of constraints and I'm not sure I follow your
description. Is this a common layout you can point to in the wild?

Personally, I prefer to start solving the most commonly used layout.
The most common sidebar in pages media is just having them on the left
(or right) side. Bert and I used this for our CSS book:

  http://www.w3.org/Style/LieBos2e/enter/

The next most common is the inside/outside sidebar, for which GCPM
offers a specified & implemented solution. 

How would you want to encode these common use cases?

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Monday, 29 July 2013 23:39:43 UTC