- From: Bert Bos <Bert.Bos@sophia.inria.fr>
- Date: Wed, 11 Mar 1998 11:19:49 +0100 (MET)
- To: www-style@w3.org
Russell Steven Shawn O'Connor writes:
> I originally posted this question to c.i.w.a.s, but I'm not getting
> satisfactory responses (yet).
>
> The question is about floating paragraphs around two images.
> If I do:
>
> <P><IMG SYTLE="float: left">short stuff</P>
> <P>'nother paragraph</P>
>
> would the correct rendering be
>
> +-*body*----------------------+
> | |
> | +-*P*---------------------+ |
> | | | |
> | | +-*IMG*-+ short stuff | |
> | | | | | |
> | | | | | |
> | | +-------+ | |
> | | | |
> | +-------------------------+ |
> | |
> | +-*P*---------------------+ |
> | | | |
> | | 'nother paragraph | |
> | | | |
> | +-------------------------+ |
> | |
> +-----------------------------+
>
> (as I think it should be) or as other's think
To achieve this, the second P would need 'clear: left'
>
> +-*body*----------------------+
> | |
> | |
> | |
> | +-*IMG*-+ short stuff |
> | | | |
> | | | |
> | +-------+ 'nother |
> | paragraph |
> | |
> | |
> +-----------------------------+
This is the correct way.
>
> I didn't draw the paragraph bounding boxes for this case because I don't
> see how it can work that way.
The bounding box of the paragraphs is still rectangular, and so is the
border (if there is any), but the image overlaps with the bottom
border of the first and the top border of the second.
The image also pushes the text aside, but doesn't deform the paragraph
box. (Except for making it higher, since the text needs more vertical
space now).
+---P------------------------+
| +--IMG--+ short stuff |
+-| |------------------+
+-| |------------------+
| +-------+ 'nother |
| paragraph |
+----------------------------+
>
> I figured that if one wanted to have 2 paragraphs float around an image,
> one would write
>
> <DIV>
> <IMG STYLE="float: left">
> <P>short stuff</P>
> <P>'nother paragraph</P>
> </DIV>
This will look exactly the same (assuming no margins on the P).
>
> But now I wounder if even that would work. I think it may produce:
>
> +-*body*------------------------+
> | |
> | +-*DIV*---------------------+ |
> | | | |
> | | +-*IMG*-+ +-*P*---------+ | |
> | | | | | | | |
> | | | | | short stuff | | |
> | | | | | | | |
> | | | | +-------------+ | |
> | | | | +-*P*---------+ | |
> | | +-------+ | | | |
> | | | 'nother | | |
> | | | paragraph | | |
> | | | | | |
> | | +-------------+ | |
> | +---------------------------+ |
> | |
> +-------------------------------+
>
> instead of the desired effect.
>
> So, how can you float two paragraphs (block level elements) around
> an image?
See above.
Bert
--
Bert Bos ( W 3 C ) http://www.w3.org/
http://www.w3.org/people/bos/ W3C/INRIA
bert@w3.org 2004 Rt des Lucioles / BP 93
+33 (0)4 93 65 76 92 06902 Sophia Antipolis Cedex, France
+33 (0)4 92 38 76 92 (<--- after 5 Jan 1998)
Received on Wednesday, 11 March 1998 05:19:52 UTC