RE: Floating a figure next to the preceding paragraph

± From: Christoph Päper [mailto:christoph.paeper@crissov.de]
± Sent: Thursday, January 12, 2012 10:07 AM
± 
± 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.
± 
± 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.

I think what you want is to align with element by ID or selector. That has been proposed numerous times and it may happen at some point (but hasn't been a priority so far)...

"Align with top of previous element" seems way too specific for this purpose and pretty complicated to define, so my bet is alignment of random elements will happen sooner.

Meanwhile, if the markup had such related elements grouped together, like 

  <div class="text-with-figure">.
    <p>Foo</p>
    <figure>Bar</figure>
  </div>

(which I don't think is unreasonable, it is semantic), then CSS3 has a number of ways to achieve layout that you want.

Alex

Received on Thursday, 12 January 2012 21:50:34 UTC