Wrapping text around a text box

Grump · 02-12-2005, 08:26 PM

I don't even know what to call this. I would like to have a small text box, with a border and with smaller text size than the rest of the page, positioned on the left side of a table (actually, about 10px away from the edge) and in the middle. I want text in the main table to flow around that text box -- top, bottom and right side.

I may also want to do this same thing on other pages, but the small text box would be positioned differently. Maybe I would center it at the bottom of the page, put it on the right side, middle, even position it so that it is centered in the middle of a page with text wrapping around all sides.

Can someone tell me what this is called and explain the coding, including HTML and CSS I would need to do to make this happen? Yes, I'm new at this, but I'll learn fast.

Thank you,

Grump

hatchet · 02-13-2005, 01:06 AM

Take a read on this..
http://www.alistapart.com/articles/crosscolumn/

Grump · 02-13-2005, 02:25 AM

Thanks, Hatchet, that was interesting reading. I also read the discussion hopping to find a way to do what I want -- without multiple columns. Unfortunately, there was no acceptable solution.

Maybe someone else will have another idea. One I thought might work would be to break the upper paragraphs off, before the small text box, with another <tr>. I don't know how to write the code, but it seems that could allow for a text box positioned on the left, right or centered. I don't know what code to use to make the text wrap around that beginning at the top of the box.

Thanks for your contribution,

Grump

hatchet · 02-13-2005, 03:11 PM

This is a hack at best - but does work.

Code:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phaseellus sollicitudin. Vestibulum condimenctum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. <span style="float:left; padding: 5px; font:Verdana, Arial, Helvetica, sans-serif; font-size:9px; border:1px solid #000000;">This is smaller text going here.. lorum ipsum farfluggin</span>Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Grump · 02-13-2005, 04:23 PM

Thanks. That only works, though, if you have a very short line of text or add line breaks to text that reached a certain width, unless it's possible to set a width in there somehow.

Question: The term "hack" in this context, does it mean it would prevent the page from validating? Is it generally considered a good or a bad thing? I ask because a lot of my site is built around the vBulletin forum software and a CMPS add-on. "Hacks" for both of them are not bad (although some are pretty crappy), but individual modifications to code or additions to add features, etc.

I'm very new at coding, so I don't even know the slang yet.

Grump

hatchet · 02-13-2005, 08:07 PM

"hack" only refers to the span tag being added inline with the text instead of by itself.
The span can be given a height and width.. add it within the style="" portion. height: 100px; width: 300px; without the height and width specified it would autofit.

Grump · 02-13-2005, 09:59 PM

Oh yeah, that's pretty cool. I played around with it more and it really does work pretty good. I can add other style properties, like a margin, which makes it display nicely. I can put the style elements inline, or pull them from my external style sheet (which would be better, I'm sure).

This will work for a text box displayed on both the right and left sides, but not in the middle or centered. It would be nice if I could get a box to display centered between the end of one and the beginning of another paragraph.

Thank you for your help on this. If you can clue me into that centered box, that would be great. Oh, and does that inline span validate?

Thanks again, I'm very glad I joined.

Grump