- From: Daniel Beardsmore <public@telcontar.net>
- Date: Fri, 23 Feb 2007 08:55:33 +0000
- To: www-style@w3.org
When you float an item left, you often get poor overhang, e.g.
+---------+ Lorem ipsum dolor, in the bathtub, lorem
| | ipsum dolor, in the bathtub, lorem ipsum
| | dolor, in the bathtub, lorem ipsum dolor,
| | in the bathtub, lorem ipsum dolor, in the
| | bathtub, lorem ipsum dolor, in the bathtub,
+---------+ lorem ipsum dolor, in the bathtub -- lorem
ipsum dolor!
Lorem ipsum dolor, in the bathtub, etc etc.
In printing, there's widow/orphan control for single lines at the start and end
of pages, but how about for underhang? How about:
underhang-limit: <count of full lines>
For example, if you want to ensure that you have no fewer than two full lines of
text underneath the float, write:
body { underhang-limit: 2 }
The above text has zero such complete lines in the first paragraph, giving:
+---------+ Lorem ipsum dolor, in the bathtub, lorem
| | ipsum dolor, in the bathtub, lorem ipsum
| | dolor, in the bathtub, lorem ipsum dolor,
| | in the bathtub, lorem ipsum dolor, in the
| | bathtub, lorem ipsum dolor, in the bathtub,
+---------+ lorem ipsum dolor, in the bathtub -- lorem
ipsum dolor!
Lorem ipsum dolor, in the bathtub, etc etc.
I wrote "body" because of course, the effect is a container effect and not an
element effect.
You may want to figure out a way of correctly fitting this into how CSS works :-)
================================================================================
Aside: I've got a page with a left-floated image, and to its right, a
<blockquote>. I've tried padding-left, margin-left, a border around the
blockquote, display: block on the float ... Nothing I do will put a wider gap
between that float and the blockquote. I hope that over the years you've found a
solution to the hideous problem of float stealing and destroying padding and
margins from elements ;-)
Received on Friday, 23 February 2007 15:50:27 UTC