CSS positioning/text wrap dilemma

[Patrick Shannon]

Well, I am absolutely stumped and have tried everything. I hope I can explain this well enough. I've prepared the following to help explain better.

http://www.patrickshannon.com/example.gif

I am currently redesigning my fencing club's website in CSS. That banner on the side uses DIVs of varying sizes to shape it's contour. Using relative positioning and floats, I can then wrap text perfectly around it in the content DIV.

The banner uses transparent DIVs and has a Z-index higher than the rest of the elements. That's to allow the "header" DIV to float behind it allowing for some neat tricks and design.

The header DIV uses absolute positioning. That's because if I use relative, then the banner bumps down considerably on the page (settling on the first banner DIV it can fit across from). Thus I HAVE to use absolute to put it in the correct place.

But the problem is that text will not wrap around absolute positioning, as you can see in the included picture. I tried to solve this by using "top: xx" on the content DIV, but the problem with that is that the bottom of the content drops past the white into the black. (Not using top, the "footer" will drop and reflow with the additional text accordingly.)

Is there any way to solve this problem?

[EC]

um, I am just guessing here, but you might want to try using relative positioning for that banner again. You can use a negative top value if it bumps down the page as it did before. (i.e. top: -200px;) type deal. That's off-the-cuff, but worth a shot.

Edit: semi-colon produces a winkee face? Hmmm. lol

[Patrick Shannon]

Naw, using a negative on either the header/banner or the content/text causes it to rise above the top of the page.

The thing is, I do want the white area to bump down further whenver more text is there, but if I use a positive "top" value, the text will drop into the black (even if it bumps it down).

[Patrick Shannon]

I just figured out a way...I used "padding-top: xx" and it made it do what I wanted it to.

[EC]

geez, I totally misunderstood the problem, sorry patrick. I will be back if I come up with something.

[EC]

Yay!!!!!!!

That's a sweet little set up you've got there, I am filing away your wrap trick in my brain. :)

[Patrick Shannon]

Tutorial for trick (sort of): http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm

My implementation (not tested yet in IE, view in Firefox/Safari or with caution): http://www.baitedblade.com/new_site/weapons.php

[Ryan8720]

Eric Meyer has that trick and many others on his site (meyerweb.com/eric/css/edge/).