Q: Floating Paragraph???

Chris Josephes writes:

 > What exactly would it take to create a floating paragraph effect using 
 > CSS, such as the following....
 > 
 > Pone----- Ptwo*******
 > --------- ***********
 > --------- ***********
 > -----     ***********
 > *********************
 > ******************
 > 
 > P1 would have a different background and typeface to distinguish itself 
 > from P2.  P1 would also have line breaks set via the <BR> tag to control 
 > line length.
 > 
 > Would the following code be sufficient?
 > 
 > P.one { float:left;
 >         width:auto;
 > 	background:yellow;
 > 	font:cursive;
 >       }

You're close. 

You seem to make the assumption that by using <BR> in combination with
'width: auto', the width of the Pone box will end up being what's
required to fit the text. That is not the case: the boxes know nothing
about their content (e.g. where BRs are) when they are sized. I.e., the
width of the box must be set, either with an explicit value on 'width'
or with explicit margins.

P.one { 
  float: left;
  width: 10em;          /* em is a great unit for this */
  background: yellow;
  font:cursive;
}

Note that the positioning of the Pone box is based on the values of
the margins -- the fact that 'float' is set to 'left' is just to
indicate that the normal text flow (i.e. Ptwo) should be on the
*right* side of the box. To ensure the position of the Pone box, you
want to set margin properties explicitly:

P.one { 
  float: left;
  width: 10em;          /* em is a great unit for this */
  margin-left: 0;
  margin-right: auto;
  background: yellow;
  font:cursive;
}

As far as I know, noone has implemented support for floating text
elements. Yet.

Regards,

-h&kon

Hakon W Lie, W3C/INRIA, Sophia-Antipolis, France
http://www.w3.org/people/howcome  howcome@w3.org

Received on Friday, 28 June 1996 04:02:19 UTC