On Sun, 15 Jul 2007 13:50:59 -0400, Rachel Vidrine wrote:
>
> When floating an image to the left or right of a paragraph, what is the CSS
> to prevent
> the last line(s) of the paragraph from continuing under the image? I just
> want the last
> lines to continue under the other lines, not underneath the image.
>
> Please see the last line of the following page:
>
> http://www.fortvalleyrealestate.com/
>
Hi Rachel,
The general solution, pre-IE7 days, was to apply the following CSS
to the paragraph that you want to "stiffen" -
p {
display: table;
height: 0;
}
"display: table;" makes it display as a box, as you'd expect.
"height: 0;" adds the "layout" property to IE, while modern browsers
expand table boxes and ignore any height. The "layout" (IE-only)
property acts similarly in this case, for some reason.
Things just got a little more complicated, because IE7 still does
not understand "display: table;" but *does* apply the height, making
a mess of our nice simple solution.
I now use this modification:
p {
display: table;
zoom: 1;
}
Others may be able to improve on that, as (a) it does not validate,
and (b) does not work in IE 5.01 Win (if you care).
Note that you no longer want the padding-left on that paragraph
(which normally goes to the left of the image, but moves to the
left of the P and to the right of the image now.)
Also note this is not ideal, as narrow windows can make the preceding
paragraph wrap, and the last one to drop. You may want to re-think
your markup to deal with this, by adding a DIV around the two Ps
and putting the IMG outside it. You would need to apply special
margins and padding to the image then, though, as it would lose
the positioning it now gets from being inside the P element.
Cordially,
David
--
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
