0

I have a html element split into 3 columns using column-count: 3; I want to have an image span across two of the columns and have any text or other images wrap around it.

I know there are probably other ways to solve this without using column-count but I am programmatically creating the html so it is of variable length and content. column-count automatically handles

I tried changing the width of the image to 200% but the text does not wrap around it.

This is my current formatting: https://i.stack.imgur.com/jvmuZ.jpg

This is my desired formatting. https://i.stack.imgur.com/DJM5j.jpg I want the image to be the size of the red rectangle with the text wrapping around it:

Here is the CSS I am using the achieve the desired result.

.blog-post {
    font-size: 8pt;
    line-height: 1.2;
    font-family: Palatino;
    color: #414254;
        column-count: 3;
}

img {
    width: 90%;
    height: auto;
}
Rob
  • 14,746
  • 28
  • 47
  • 65
newimprovement
  • 52
  • 4
  • 1
    This is not possible with CSS. You *can* span multiple columns using column-count but only ALL of the columns. If text is required to wrap around the image then there is no other method. - https://www.quackit.com/css/css3/properties/css_column-span.cfm – Paulie_D Aug 28 '19 at 10:03

1 Answers1

-1

Have you tried adding float to your css?

img {
    width: 90%;
    height: auto;
    float: left;
}

OR you can try reading up more about it here: How to wrap text around an image using HTML/CSS

coolnuhman
  • 52
  • 6