Link to home
Start Free TrialLog in
Avatar of Eric - Netminder
Eric - NetminderFlag for United States of America

asked on

Floating a text box

Some time ago, I was asked to create a page that looks like the one attached here; essentially, it wraps the text around an image, and is derived from http://alistapart.com/article/crosscolumn .

Now, the same client has asked that I do this again -- except that the space in the middle of the page has two distinct characteristics: 1) it has a box around it, and 2) it's text. Obviously, I could cheat, but I figured I'd give it a try, and I've spent the last three or four hours trying to come up with a way to do this.

So... In short, can this be accomplished, and if so, how?
erictest.htm
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Avatar of Eric - Netminder

ASKER

Might be... I'll see if I can figure it out. The page itself is static html; is that going to make a difference anywhere? (I can spell JQuery, but otherwise, I don't know if I'd recognize it if it walked up and smacked me... )
Jquery is a javascript library that is designed to play with the DOM easier.  (move things around where they shouldn't)
SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Cd&,

If you look at the test page, making the layout work with an image is a surmountable problem; my task now is to do the same thing with text.

padas,

When you float the image over two columns, the technique (as you'll see on the test page) is to do an empty container on the left column, and then put the image in a container in the right column that is 1) half as wide as the image and 2) set to a negative margin of half the width of the image. That gives it the appearance of floating in the middle of the two columns like this:User generated imageNow what I have to do is replace the orange box with a white box containing text, as opposed to an image. I get the idea with what you're suggesting, but if you take a look at the HTML page, the space in which the image is inserted is a span; the author of the article is quite clear on why a div won't work.

ep
padas,

The article you listed might work -- but the text-resizing part makes me a little nervous; it seems like a lot of stuff to include on the off chance that someone might want to resize the text.

(I can hear the screams of anguish, not to mention a lot of unprintable words coming from COBOLdinosaur right about now.)

I've done your simple block element in erictext2.htm; as you can see, the block shows up fine, but covers the text in the two underlying columns. Now... if there's a way to force the text to wrap around a blank space, the text could go over the top of that, correct?

ep
You should still be able to use a split image to force the floats and then stick the text in a div you reposition.

Without something to wrap around the only other way you argoing to manage it are to break up at paragraphs, and force a fixed size by specifying font size.  You end up with three blocks for each column and the width of the second one in each column has a narrow enough width to appear to wrap around the box.  The positioning on the right could be controlled with margin.

The whole thing is going to be a piece of glass that will not allow for changes in resolution or viewport size except with scripting that will not be pretty.

As for the howls... this is a non-standard requirement, that is not going to be built following normal best practices, and probably not even standards.

If all else fails put the whole page in a graphic program and make the whole page an image.

Cd&

Cd&
Cd&,

I think I didn't realize what you were suggesting.

In my initial page, the left hand column has the space for the image created by a span of a fixed size (CCspace) that contains a no-break-space. The right hand column has the space for the image with a wider span that is offset by -120px, and then the image is in a third span over the top of what is now blank space; the text in each of the two main columns wraps around.

Are you suggesting that I do the same thing with a blank image -- in the case I show in the image, the orangish-redish box, except white -- and then create an absolutely positioned div to go over the top of that? Because that would make sense and would give the illusion I want to create.

You're right about the particulars; padas' article in http:#a39020417 shows the jquery scripting and it's a lot more trouble than it's worth for this specific situation. The client puts out a newsletter and offers its clients ONLY either a printed version or a PDF, and my task every couple of months is to turn out an HTML version that mimics as closely as possible the PDF; unless you know where the pages themselves are, you can't really even find them on the company website. The only way a person could find this page is to get the HTML email of the first page, and then click the link on a page to go to the other three.

So we're only talking about maybe a couple of hundred readers who probably won't even think about it again until two months later when another issue of the newsletter is released.

ep
Eric,

If it is not public facing where you have to worry about a couple of hundred different combinations of browsers, resolution and user settings then you can go with a rigid format and you won't need scripting.

Plus I think you actually end up with valid code by using a sliced blank image and just overlay the text in with an absolute positioned div.  the code won't win any beauty contests but it would be valid and robust once you nail down the positioning.  The only thing is you might have to adjust the size for each new version unless the text is always going to be the same size.

Unfortunately, sometimes the position fine tuning can be the biggest pain.  I think you know how to do the code but if you need any help with it let us know.

Cd&
Cd&,

Thanks; let me tinker with it tonight, and if I run into any issues, I'll holler.

ep
Eureka.

This was fun. Will post the final version of the test page, along with a description of what I had to do so that people can tinker with this problem themselves.

Thanks to both of you for pointing me in the right direction.

ep
It was fun to play with.

Cd&
I get permission denied on that link.

Cd&
Damn PEs haven't published it yet... *laughing*... too bad they don't have any Admins who'll kick their butts.
I check back later.

Cd&
Gents,

Sometime in the fairly near future, I'm going to have this question re-opened for the purpose of creating a screen cast for EE on closing questions. In doing so, it will be opened and closed several times, but rest assured that the points will be re-awarded appropriately when we're all done.

Thanks for your patience and understanding.

ep