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

RE: Floating a figure next to the preceding paragraph

From: Rossen Atanassov <Rossen.Atanassov@microsoft.com>
Date: Tue, 17 Jan 2012 03:25:35 +0000
To: Christoph Päper <christoph.paeper@crissov.de>, "www-style@w3.org list" <www-style@w3.org>
Message-ID: <9A57384B9CE9AE4F9C01F3BB5C3D88440B9525@TK5EX14MBXW604.wingroup.windeploy.ntdev.microsoft.com>
> -----Original Message-----
> 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.
> 
>   <article>.
>     <p>Foo</p>
>     <figure>Bar</figure>
>   .</article>
> 
>   Foo    Bar
> 

You can use an absolutely positioned exclusion (see the css3-exclusions module) here quite naturally. The only requirement would be to make the <article> an absolutely positioned container ('positoin:relative'). The following will be all that's needed to make your figure an exclusion.

figure {
  wrap-flow: left; /* in this case 'both' would do as well */
  position: absolute;
  top: 0px; 
  right: 0px;
}

Cheers,
Rossen
Received on Tuesday, 17 January 2012 03:25:54 GMT

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