Floating a figure next to the preceding paragraph

A pattern I come across frequently, e.g. on Wikipedia, is a paragraph that semantically introduces a figure and, therefore, in markup the text should also come before the table or embedded picture, but they should be displayed side-by-side, with the figure starting at the same vertical position as the paragraph (i.e. aligned top edges) or at the next available position below. 

  <article>…
    <p>Foo</p>
    <figure>Bar</figure>
  …</article>

  Foo    Bar

As far as I can see, there is currently no simple way to achieve that in CSS, including level 3 and 4 editor’s drafts, but it mostly works if the markup order is reversed:

  figure {float: right;}

  <article>…
    <figure>Bar</figure>
    <p>Foo</p>
  …</article>

Altering the markup, however, is unacceptable in many situations. In this reduced example you could get by using Columns or probably with one of the layout modules (Grid etc.), but not in the general case.

To solve this usecase, I’d like to suggest something easy (from an author’s point of view) like this:

  figure {
    float: right;
    float-align: top/*= <edge>*/ sibling/*= previous box */;
  }

or

  p {
    clear: top; /* add a vertical float barrier */
  }
  figure {
    float: right top;
  }

PS: Is there an overview of CSS 2.1 properties linking them to their CSS 3 modules?

Received on Thursday, 12 January 2012 18:09:37 UTC