Floating images among text

I've been wanting web pages that nicely embed images among text. The
way I typically do this at the moment is to sprinkle my IMGs through
the text as floats, alternating between float: left and float: right.
Mostly I test with IE 6 and Firefox 1. I'm having a hard time stopping
ugly empty gaps appearing in the text.

If I use clear: both then, if the browser window is too wide, the text
takes up less vertical space than the images, and I end up with ugly
vertical gaps in the text.

If I use clear: none then, if the browser window is too narrow, there
are still ugly vertical gaps in the text where floats are on the left
and the right and the browser decides there's insufficient horizontal
space in between them to render text too.

What would work well is if, whatever the browser width, floats would
come on each side of the page except if they leave no room to render
any of the text in between.

How do other people deal with this sort of situation? Really I just
want my images to float as far from the actual IMG as they need to to
allow some text to appear on each line. But, I find that my current
pages leave no vertical gaps in the text only within some range of
browser window widths.

-- Mark

Mark Carroll <markc (AT) chiark (DOT) greenend.org.uk> wrote:

Really I just
want my images to float as far from the actual IMG as they need to to
allow some text to appear on each line. But, I find that my current
pages leave no vertical gaps in the text only within some range of
browser window widths.

You are not describing the problem clearly, post a url to an example.

--
Spartanicus

Mark Carroll wrote on 04 jan 2005 in
comp.infosystems.www.authoring.stylesheets:

I've been wanting web pages that nicely embed images among text. The
way I typically do this at the moment is to sprinkle my IMGs through
the text as floats, alternating between float: left and float: right.
Mostly I test with IE 6 and Firefox 1. I'm having a hard time stopping
ugly empty gaps appearing in the text.

If I use clear: both then, if the browser window is too wide, the text
takes up less vertical space than the images, and I end up with ugly
vertical gaps in the text.

Put the text and the floating imgs in a fixed width div:

<div style="width:600px;font.size:10pt;">
lot of text
<img style="float:left;width:200px;" src="..">
bit of text
<img style="float:right;width:200px;" src="..">
lot of text
</div>

However, people on this NG don't like fixed sizes.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

"Mark Carroll" <markc (AT) chiark (DOT) greenend.org.uk> wrote

I've been wanting web pages that nicely embed images among text. The
way I typically do this at the moment is to sprinkle my IMGs through
the text as floats, alternating between float: left and float: right.
Mostly I test with IE 6 and Firefox 1. I'm having a hard time stopping
ugly empty gaps appearing in the text.

If I use clear: both then, if the browser window is too wide, the text
takes up less vertical space than the images, and I end up with ugly
vertical gaps in the text.

If I use clear: none then, if the browser window is too narrow, there
are still ugly vertical gaps in the text where floats are on the left
and the right and the browser decides there's insufficient horizontal
space in between them to render text too.

What I'm understanding you to want is to have images float nicely on
alternate sides, with the top of each image appear at a level that is, say,
3 ems lower than the bottom of the previous image, regardless of where that
happens to be with respect to the text. Then the text flows independently of
the location of the images, other than by not overlapping them. In other
words, the kind of layout sometimes seen in print media. Sorry, no way to do
that on the Web, at least not without hefty amounts of Javascript
determining image positions, setting their display property to "hidden" when
necessary, changing the float properties of the ones that remain visible to
maintain the alternating arrangement--and then running through the whole
computation all over again because now the layout of the page has been
thoroughly altered and more adjustments might be necessary. And even if all
this works, and the browser correctly positions everything in the end, it
won't work for people who have Javascript turned off, and you'd have to kick
off the process all over again if the user resizes his browser while your
page is being displayed. It would be a mess. I don't advise it, even if you
know how.