This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.


Floating Text

Howard Marvel writes:

In my quest to learn css, I came across a new item at webreview by a frequent contributor to this group, Eric Meyer, The url is (1) Meyer claims that IE doesn't do drop caps, because it does not support floating text elements. Since I had done floating text elements in IE, I went back to figure out why his example did not work. Turns out that since I was doing the floating text like a marginal note, I had declared a width for the float. Put in width:1em in Meyer's example, and viola, almost, we have a solution. Use a narrower width and the solution is better.

But then I notice that things are strange. What is this that NS is doing? What happens if I use x-large as a font size instead of 200%? Similar results, except that the drop is too large for NS, IE does better.

Moral, I think: If you want to float some text, it may be best to declare an explicit width when possible.

(1) The style declaration to simulate the unsupported pseudo-element is:

 <STYLE type="text/css">P {font: 12pt serif; color: black;} .dropcap {font: 200% serif; color: navy; float: left; width: 1em; } </STYLE><P> <SPAN class="dropcap">T</SPAN>his is the first sentence of the paragraph.</P>

Howard Marvel writes:

Sue Sims