Re: [css-d] Forcing Widows on Paragraph to Right of Floated Image Not to Wrap Under
In all the p.~1 examples currently visible, the problem could be solved by simply treating the problem as a 2-column one; for a more general solution that would allow very long text over-runs to continue under the image rather than alongside, I would try an approach that places each paragraph in its own container, and allow any one container to either be alongside or underneath but never both. Philip Taylor Rick Gordon wrote: I'm wondering if there is a pure-CSS way to force widowed lines in a pargraph to the right of a floated image which is long enough to have a line or two wrap underneath the image. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forcing Widows on Paragraph to Right of Floated Image Not to Wrap Under
Thanks, David,
That does just what I asked for, though now I'm clear that it needs a
smaller hammer -- just to affect paragraphs that wrap over with 2 lines
or less. So I may be back to JavaScript, but that is a much easier fix
than to have to either wrap the paragraph in a div or to recalculate its
left indent based on the image width. So that's definitely a big help,
and a new element to add to my holey-as-swiss-cheese understanding.
Rick Gordon
-
On 4/16/15 12:55 PM, David Hucklesby wrote:
For the Yestermorrow School article, try adding this rule to your CSS:
.postlistcontent p {
overflow: hidden;
}
Explanation: overflow with any value other than visible (the default)
gives the
paragraph a new block-formatting context so it does not wrap below
the float.
More here:
http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Forcing Widows on Paragraph to Right of Floated Image Not to Wrap Under
On 4/15/15 4:25 PM, Rick Gordon wrote:
I'm wondering if there is a pure-CSS way to force widowed lines in a pargraph to
the right of a floated image which is long enough to have a line or two wrap
underneath the image.
See the bottom couple of posts at http://www.theshelterblog.com/ , where at a
1200+ px window width, the lines wrap that way. (The blog has a post or two per
day, so in time they will migrate up to the second page of posts.) Example posts
that format that way on the home page are titled Yestermorrow School and This
Crop of Women Farmers Is Stepping Up to Sustain the Land.
For the Yestermorrow School article, try adding this rule to your CSS:
.postlistcontent p {
overflow: hidden;
}
Explanation: overflow with any value other than visible (the default) gives the
paragraph a new block-formatting context so it does not wrap below the float.
More here:
http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
