By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,206 Members | 1,050 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,206 IT Pros & Developers. It's quick & easy.

Text Falls Behind Images Contained in Floating DIVs

P: n/a

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
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.