Jump to content

Wrapping 3 column div around floated image.


njdubois

Recommended Posts

This question has been asked almost exactly:


 

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:


 

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:


 

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

[EDIT]

Edited by njdubois
Link to comment
Share on other sites

  • 4 weeks later...

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 by cssfreakie
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.