newseed 13 Posted June 23, 2011 Report Share Posted June 23, 2011 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? Quote Link to post Share on other sites
falkencreative 49 Posted June 23, 2011 Report Share Posted June 23, 2011 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. Quote Link to post Share on other sites
newseed 13 Posted June 23, 2011 Author Report Share Posted June 23, 2011 (edited) 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 Quote Link to post Share on other sites
PicnicTutorials 4 Posted June 24, 2011 Report Share Posted June 24, 2011 Try test #18 float center. http://www.sitepoint.com/forums/css-53/css-test-your-css-skills-number-18-a-605819.html Quote Link to post Share on other sites
newseed 13 Posted June 24, 2011 Author Report Share Posted June 24, 2011 (edited) 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 Quote Link to post Share on other sites
PicnicTutorials 4 Posted June 24, 2011 Report Share Posted June 24, 2011 Bens solution is probably going to be your only one. Quote Link to post Share on other sites
Recommended Posts
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.