a "clear: smart" feature in CSS?

A common problem when laying out pages:

 <img src="relatively-large.gif" align=left>
 <p>This is a long paragraph describing stuff blah blah blah...
 (ok, it's not that long but pretent it is for the sake of argument)
 </p>

On browsers with even medium-sized windows, it looks fine. The image 
is on the left and on the right is the text.

But when the window is smaller (say using frames on a lower-
resolution screen) the paragraph is still on the right side of the
image, but only one word per line, which looks pretty ugly.

Using JavaScript to insert a <br clear=all> if the screen width if
smaller than a certain amount is an idea, but it's not foolproof
since (1) different default font sizes on different screens will
mess this up and (2) not all browsers support JS and (3) I have no 
idea how to do this in JS anyway.

A better solution would be a "clear: smart-right" (or smart-left
etc.) attribute in CSS.  If there's plenty of room for text or
images on the right hand side, it won't clear. If there's not enough
room (text cannot be rendered with more than two words per line: I 
can't think of a good general formula for this at the moment) that
it would clear. A browser or renderer that doesn't have the
'smart's would clear for all instances rather than risk ugly
output. 

Comments?

Rob
---
Robert Rothenburg Walking-Owl (wlkngowl@unix.asb.com)
(Se habla PGP.) http://www.wusb.org/mutant/

Received on Friday, 5 September 1997 20:26:37 UTC