471,073 Members | 1,172 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,073 software developers and data experts.

Text Falls Behind Images Contained in Floating DIVs


I am having difficulty with the page located here:

http://tinyurl.com/2zwa9

I am creating a number of image sets (some left-, some right-aligned; an
example of the right-aligned is shown the first figure below) in which
the text accompanying the image sets flows down around them. The image
sets have a single image on top and two immediately below. To create the
effect, I contain the image on top in a DIV and float it, and the bottom
two images are contained in a DIV and floated as well. The accompanying
text appears in the HTML file following the floated DIV elements.

In IE6.x this coding causes the line of text just at the point where the
two bottom images are rendered to fall behind the image rather than break
where the image appears. This line is shown as 'xxxxxx' instead of
'........'. In the URL above, this is seen in the first two image sets,
which have a large amount of accompanying text. I have not tested this
with other http clients to see if they style with a similar defect. Is
the defect in proper style coding, or is this a case of a defect in the
client to implement the specification properly? A suggested workaround
that works for most, if not all, browsers is appreciated.
These figures are prepared for message readers set to a fixed-pitch font:

[images are contained in the boxes; '.......' represent lines of text
'xxxxxx' represents a line of text that flows behind the leftmost of the
pair of images on the page]

+---------------+
................................. | |
................................. | |
................................. | IMAGE |
................................. | |
................................. | |
................................. | |
................................. +---------------+
xxxxxxxxxxxxxxx +---------------+ +---------------+
................ | | | |
................ | | | |
................ | IMAGE | | IMAGE |
................ | | | |
| | | |
| | | |
+---------------+ +---------------+
One fix would be to contain all three images in a floated DIV, but which
would exclude the text in an unwanted way like so:

+---------------+
............... | |
............... | |
............... | IMAGE |
............... | |
............... | |
............... | |
............... +---------------+
............... +---------------+ +---------------+
............... | | | |
............... | | | |
............... | IMAGE | | IMAGE |
............... | | | |
| | | |
| | | |
+---------------+ +---------------+
Jul 20 '05 #1
0 2221

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by David Ehmer | last post: by
12 posts views Thread by meltedown | last post: by
8 posts views Thread by Yeow | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.