HighDots Forums  

Text Falls Behind Images Contained in Floating DIVs

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Text Falls Behind Images Contained in Floating DIVs in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
styler
 
Posts: n/a

Default Text Falls Behind Images Contained in Floating DIVs - 06-17-2004 , 10:00 PM







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 |
................ | | | |
Quote:
| | |
| | |
+---------------+ +---------------+


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 |
............... | | | |
Quote:
| | |
| | |
+---------------+ +---------------+




Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.