Topic awaiting preservation: Flowing scrolling text around a fixed image (Page 1 of 1)

Hmmm, I'm not sure if this is straightforward or even possible.

What I'm trying to do is have a main DIV box on my page with lots of text content that can be scrolled through. The tricky part is I want there to be an image at the bottom left of the box which remains at the bottom left as the content is scrolled through (some sort of follow scroll thing maybe). The more trick part is that I want the text to flow around the image, not for it to be superimposed over the text.

I normally just use HTML/CSS and some VBScript, but I have a feeling this is some sort of JavaScript DHTML problem. But I'm not sure how feasible it will be and I would really appreciate some guidance from those who have experience with this sort of thing.

Thanks,

eZ-A

eza123: Hello and welcome in the Asylum,

I haven't made any test, but my first guess is to use a DIV with overflow:auto; Slice your image a bit and place the slices with position:fixed; A bit like the Ragged float and Curvelicious CSS demos by Eric MEYER.

Thanks poi for your quick response. That's roughly what I'm looking for, but instead of the image being fixed in the text (so that when you scroll down the image moves up the screen), I want the image to be fixed in the screen, so that as you scroll down the text moves around the image, which remains static in position to the top and bottom of the browser.

I can't see how this will work with just CSS, unfortunately. But the only ways I can think to do it with Javascript are quite formidable (taking all the content as a text string and laying it out dynamically). I'm hoping someone would have some clever suggestion, or I was missing something obvious or somethings.

Cheers,

eZ-A

Wow... yeah, there's no way you're going to do that with just CSS. It sounds like a rather formidable undertaking.

On the practicality level, I'm wondering how long the cool factor would last and how long it would be until that got really distracting.

Sorry I've got nothing positive or helpful to contribute.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup | "Hooray for linguistic idiots and yak milk!"

That was just some track you can explore. Another good candidate for what you're looking is Eric MEYER's Box punch CSS demo. It should be possible to make it a bit dynamic.

Hope that helps,

[edit] Btw, I agree with SUHO and DL-44. Seeing the text content "dance" around the image would have a highly disturbing impact on the eye. [/edit]



(Edited by poi on 04-12-2005 18:10)

I'm with Suho.

I would highly recommend *not* doing this even if you could find a way.

Imagine how awful an experience that would be for the user, scrolling the page and watching the text they are trying to read jump all over the place to flow around this image!


Can't see any possible benefit and a big a big downside....