Re: Floating a figure next to the preceding paragraph

"Tab Atkins Jr." <jackalmage@gmail.com>:

> I'm not sure about float-based methods, but this can be done with <figure> and Flexbox:
> 
> <figure>
> <figcaption>Foo</figcaption>
> <img>
> </figure>
> 
> figure { display: flexbox; }

That’s not dealing with the usecase I tried to demonstrate, let me retry:

  HOW IT SHOULD LOOK LIKE_________________________< major float barrier
  This paragraph is the     < unused right area  >
  first in this section,
  but not really relevant
  for the alignment of
  the floated figure.
    This is a paragraph
  directly before the one
  that will introduce the
  figure. Its contents
  may have some relevance
  to the figure already,
  though._________________________________________< minor float barrier
    In this most important | The Caption Above
  paragraph – for this use | “Hi, I’m the actual
  case – we are actually   | contents of that
  talking about the same   | figure there is so
  stuff the figure shows.  | much buzz about.”
  We may explicitly make   |
  a reference to it, but   ^ float barrier
  that might be implied    
  only just as well._______< original markup position of figure
    Another paragraph
  which may still talk
  about stuff that is
  featured in the image,
  table or whatever the
  figure is composed of.

  PLAIN OLD FLOAT RIGHT
  … In this most important
  paragraph – for this use
  case – we are actually
  talking about the same 
  stuff the figure shows.
  We may explicitly make
  a reference to it, but
  that might be implied    
  only just as well._______
    Another paragraph      | The Caption Above
  which may still talk     | “Hi, I’m the actual
  about stuff that is      | contents of that
  featured in the image,   | figure there is so
  table or whatever the    | much buzz about.”
  figure is composed of.
    A final paragraph
  that contains a nice
  picture  +---------+
  floated  |  image  |
  right.   +---------+
    Really the last one.

  NO FLOATING
  … In this most important
  paragraph – for this use
  case – we are actually
  talking about the same 
  stuff the figure shows.
  We may explicitly make
  a reference to it, but
  that might be implied    
  only just as well.
    The Caption Above
   “Hi, I’m the actual
   contents of that
   figure there is so
   much buzz about.”
    Another paragraph
  which may still talk
  about stuff that is
  featured in the image,
  table or whatever the
  figure is composed of.

Received on Friday, 13 January 2012 11:58:53 UTC