CODEWITHSUNDEEP
htmlcssmultiple-columns
JSP64
JSP64

Reputation: 1462

wrap multi-column div around image

This question is almost identical to How to add floating image without making CSS3 multicolumn div narrower?, which was not answered.

I have a multi-column div that I want to wrap around an image that will float in the top right of the page. The problem is that the text in the multi-column div does not wrap, even though the div is set to float.

Should look like:

|-||-|xxxxxx
|-||-|xxxxxx
|-||-|xxxxxx
|-||-||-||-|
|-||-||-||-|

Currently looks like:

      xxxxxx
      xxxxxx
      xxxxxx
|-||-||-||-|
|-||-||-||-|
|-||-||-||-|

The HTML:

<img src="something.png"/>
<div>some really long text</div>

The CSS:

img {
    float: right;
    clear:none;
}
div {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;

    -moz-column-width:157px; /* Firefox */
    -webkit-column-width:157px; /* Safari and Chrome */
    column-width:157px;

    float:left;
    clear:none;
}

I have a jsfiddle here: http://jsfiddle.net/JpcM4/2/

The challenge is that I do not know how much text is going to be in the div, and I do not know how wide the image is. That means I can't just have four divs for four columns and float them separately, since I don't know what text is in each column or even which columns will be shortened by the image.

I also looked at column-span and -webkit-column-span (which would not work for Firefox anyway), but it seems that's not what I'd thought: http://www.w3.org/TR/css3-multicol/

Upvotes: 5

Views: 3137

Answers (1)

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

Look at this fiddle. I removed column-counts and column-widths from div. I did this, because unfortunately not all columns can fit to the left of the div, so you cannot have text directly underneath it. Here's a small hack to do it, because it cannot be done purely in css, so the hack is to create two different divs: one on the left, and one on the right (float:left and other underneath).

.thumbimage {
    float: right;
    clear:none;
    padding: 0px 0px 0px 5px;
}

Upvotes: 0

Related Questions