Sent by Big John on 29 November 2002 17:05
Peter Bowyer wrote:
-snip-
> All's fine with it until you narrow the browser window or have a lot of
> text in the paragraph next to the images - when it reaches the bottom of
> the image it wraps underneath it. How do I prevent this happening - so it
> looks as if the image is in one table column and the text in another (for
> want of a better way to describe the effect I'm after)? I've tried padding
> on the paragraph, clear: etc but can't fix it.
Quote from a W3C example:
"Text flows normally up to the inner box, which is pulled
out of the flow and floated to the right margin (its 'width'
has been assigned explicitly). Line boxes to the left of the
float are shortened, and the document's remaining text flows
into them."
http://www.w3.org/TR/CSS2/visuren.html#q28
So the non-floated content element just gets overlaid by the
float, and only its inline content (line boxes) get reduced
horizontally, thus keeping them from also being covered by
the float. Naturally, once a line box is lower down than the
bottom of the float, it can be full-width.
There are three ways to prevent the 'underwrap'.
The simplest is to place a margin on the main div (.tutors), big
enough to move the entire element out from beneath the float.
That way, the the line boxes will be controlled by the side of
.tutors, rather than the side of the float.
You'll need to place the float before .tutors to make it work.
Bear in mind that IE likes to add 3px of space to the end of
any line box adjacent to any float. Even if you margin .tutors
far away from the float, the space is still added, presumably
to prevent text from ever besmirching a float with
its foul caress.
That's great, but it causes a visible 'jog' in the side of
the visible text-block, just at the bottom edge of the float.
Very annoying.
The next way is to float both blocks, accomplishing the
stated goal without triggering the IE bug. However,
to be liquid, only percentages can be used for 'width'.
The third way is evil and must never be used.
It turns out that if .tutors were given a width of '100%',
then IE would decide that this meant to place .tutors
alongside the float, widening it to fill the remaining
available horizontal space. Further, the width is continued
below the float, so no jog.
Good browsers like Moz and Opera follow the standard float
model, not the IE float model. So '100%' means "100% of
the width of the container element", not "100% of what's
left of the container width, once the float is deducted".
IE actually does follow the standard; That is, until a
'width' is added to .tutors. Then the float seems to
become part of the container margin,
as far as IE is concerned.
These features are present in IE5/6/win, so MS is
essentially forcing a choice between IE and
standard compliant browsers, if floating is to be
used as it was meant to be. Or there's always hacking.
(sounds of hacking)
Big John
=====
"What the world needs is a good bug ring"--Big John
<http://users.rraz.net/mc_on_the_rocks/testpage/pie.html>
__________________________________________________
Do you Yahoo!?
Yahoo! Mail Plus - Powerful. Affordable. Sign up now.
http://mailplus.yahoo.com
_______________________________________________
css-discuss [EMAIL-REMOVED]]
http://two.pairlist.net/mailman/listinfo/css-discuss
Sponsored by www.westciv.com - CSS resources | software | learning
