Wrapping 3 column div around floated image.

[njdubois]

This question has been asked almost exactly:

https://stackoverflow.com/questions/20982768/wrap-multi-column-div-around-image

 

I apologize for asking here but the question is almost a year old, and I can't add a comment to it anyways.

 

This is killing me.  I'm trying to achieve the same thing only with 3 columns.  I have to match a printed publication with no other options.  I know the width of images, but the text will always be different lengths.  Width of an image will always be 1 or 2 columns, height will always be different.  Sometimes there is more than one image lined up vertically.  Same widths, different heights.  Open up any magazine and you will see what I am talking about.

 

Column span seems to be all or 1, and I am uncomfortable with it's browser support.  I'd also have to perfectly position it inside the content text, and because I want to automate things this isn't an option.  Am I incorrect?

 

View my current work here:

http://www.cswea.org/mag_templates/

 

The code looks like this:

    <div style="margin-left:300px;margin-right:300px;">



        <div style="margin-left:10px;margin-bottom:10px;display:inline-block;float:right;background-color:blue;width:600px;height:500px;"></div>



        <div style="display:inline-block;float:left;-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;-webkit-column-rule: 1px outset grey;-moz-column-rule: 1px outset grey;column-rule: 1px outset grey;">

            <?php include("content.php"); ?>

        </div>

    </div>

content.php is 4 P tags with the garbage text inside.

 

As you see, it matches what the OP in the first link is trying to do.  If I could post a follow up question/comment that isn't an answer I'd post there.  If I remove the columns, the text wraps the way I want it to but it won't fly.  Absolutely MUST be 3 columns wrapped around these images and I feel like I'm against a wall here.

 

All my research and googling, or following links from that stack overflow post tells me this isn't possible.  I like to believe that in the world of html and css, anything is possible.

 

My other option is a non column divided div, but that means I would have to develop an intelligent way to divide the text up into each div so it looks natural like a magazine article.  content.php will always be a list of paragraph tags filled with any length of text so getting the desired result is no simple task.

 

Any tips tricks or hints?  Is there somewhere that I can submit the need for this to those involved with what is in the next versions of CSS or HTML?  I'm sure if there is that many have already submitted so maybe one  more person will help?  Is there an HTML5 solution I'm missing?

 

Thank you so much for taking the time to read this!

 

[EDIT]

The PDF of the magazine I am working with is here:

http://www.cswea.org/magazine/CS_Fall2014_RICH.pdf

 

On page 24-27, the plant profile article, this is what I need to reproduce.

[EDIT]

Edited December 22, 2014 by njdubois

[cssfreakie]

This is not something for CSS, I'm afraid. The pdf you provided clearly shows the text starts in a new collumn when it doesnt fit. You could make a structure in html and css where you have positions like #text1 #text2 #text3 and #imageplaceholder (some CMS like Joomla call those positions modules). Than Find out how much words fit in each position and use php to split the text up in 3 collumns. You can read how to do that here: http://stackoverflow.com/questions/79960/how-to-truncate-a-string-in-php-to-the-word-closest-to-a-certain-number-of-chara

Did you read the Pinned topic btw?

Edited January 20, 2015 by cssfreakie