Text Wrapping Around a Centered Div

[newseed]

I have a two column content page that has a div centered between them. My goal is to get the test for the left and right columns to wrap around the center div box.

 

See attached image file.

 

Any suggestions?

[falkencreative]

One thought, though it's a hacky solution... Use two columns for the left/right content, and then a transparent gif image, floated right in the left column and left in the right column to make the two columns flow around that area. And then the centered div could be absolutely positioned on top of those two transparent gifs.

 

I would bet there is some other more elegant solution though.

[newseed]

I did indeed thought of that method you've just mentioned but then the placment of the image gif will vary dependent on how much content is placed. The text wrapping could differ between the two columns.

 

There are script methods but I have yet to find one that is...well..just plane simple...a no brainer.

 

Although it will not work in my case right now but I wonder if there is a CSS3 solution for future use?

Edited June 23, 2011 by Eddie

[PicnicTutorials]

Try test #18 float center. http://www.sitepoint.com/forums/css-53/css-test-your-css-skills-number-18-a-605819.html

[newseed]

Thanks Eric but it's not the solution I am looking for.

 

The test #18 solution is allowing one column content to wrap around a centered div box. That solution reads each line of text from the left of the box and then jumps over to the right of the box. My content sample is set in two columns. The left column content will need to wrap around the left of the centered box while the right column wraps around the right of the box.

 

I strongly believe this is not possible without jquery or something. Ben's suggestion is not perfect but it may be the only choice I have even though it will require a bit more of an effort to get it to look right.

Edited June 24, 2011 by Eddie

[PicnicTutorials]

Bens solution is probably going to be your only one.