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/
[css-d] Forcing Widows on Paragraph to Right of Floated Image Not to Wrap Under
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. I know that I can accomplish that with jQuery and a special class for the paragraph, but would prefer the possibility of a pure CSS approach, though I'm not sure that it's possible. ___ 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/