Jump to content
Stef's Coding Community

Text Wrapping Around a Centered Div


Recommended Posts

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?

div-box-sample.png

Link to post
Share on other sites

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.

Link to post
Share on other sites

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 by Eddie
Link to post
Share on other sites

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 by Eddie
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...