W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Floating a figure next to the preceding paragraph

From: Christoph Päper <christoph.paeper@crissov.de>
Date: Thu, 12 Jan 2012 19:06:30 +0100
Message-Id: <C581599F-E8F3-469F-971A-FE12354E76B2@crissov.de>
To: "www-style@w3.org list" <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT