Wrapping Two Columns of Text Around an Image/Shape from Both Sides HTML CSS

wrapping two columns of text around an image/shape from both sides html css

Here is an idea based on this previous answer where I will add the margin factor to control the space between text and image:

div.box {  border:1px solid red;  margin:5px;  font-size: 0;  max-width: 600px;  --R:100px; /* radius */  --m:5px;   /* margin */  --t:10px;  /* distance from top */}
div.box p {  width: 50%;  margin:0;  padding:0 var(--m);  display: inline-block;  vertical-align:top;  font-size: initial;  text-align: justify;}
div.box p:before {  content: "";  width: var(--R);  height: calc(2*var(--R));  padding:var(--m) 0 var(--m) var(--m);  margin-top:var(--t);  background:var(--img) content-box;  background-size:200% 100%;  shape-outside: circle(var(--R) at var(--d,right) calc(-1*var(--m)) top calc(50% + var(--t)/2));  float: right;  border-radius: 500px 0 0 500px;  margin-right:calc(-1*var(--m));}
div.box p:last-child:before {  float: left;  padding:var(--m) var(--m) var(--m) 0;  --d:left;  background-position:right;  border-radius:0 500px 500px 0;  margin-left:calc(-1*var(--m));  margin-right:0;}
*,*::before,*::after {  box-sizing:border-box;}

<div class="box" style="--img:url(https://i.picsum.photos/id/1011/400/400.jpg)">  <p>    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,   </p>  <p>    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,   </p></div><div class="box" style="--img:url(https://i.picsum.photos/id/248/400/400.jpg);--R:80px;--m:10px;--t:30px;">  <p>    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,   </p>  <p>    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,   </p>
</div><div class="box" style="--img:url(https://i.picsum.photos/id/1074/400/400.jpg);--R:150px;--m:2px;--t:30px;">  <p>    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,  illum esse veniam eligendi, dolor conseq uuntur iure,   </p>  <p>    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,  illum esse veniam eligendi, dolor conseq uuntur iure,   </p>
</div>

Using CSS to wrap text around image and have it behave like a background image

the new overflow:clip applied to the container will do the job

.image {
  float: right;
  max-width: 200px;
  height: auto;
  shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}

.footer {
  width: 100%;
  height: 50px;
  border: 2px solid green
}

/* .text{ 
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
  } */

.container {
  overflow: clip;
}

<div class="container">
  <img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
    quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
  </div>
</div>
<div class="footer">

</div>

CSS wrap text around centred image

Question resolved :

Actual situation :
The CSS shape works for float, so it's not for centered images now. This property works only for Chrome and Opera at the moment.
Maybe there will be a solution for non float elements in the future. Look at this W3C editor's draft : http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

A hand made CSS solution :
Basically, there are 2 columns (like in newspapers). The text begins in the left column and goes down. The text continues on the top of the right column and goes down. The columns are a bit higher than the image. The left column has a half invisible circle as well as the right column - on the position of the centered image. The two half circles are build by multiple boxes of different length, they are invisible. (The hight of the boxes is the height of the font.) The text must be justified. The text is now flowing around the half circles in each column. The image will be positioned over the 2 invisible half circles.

Another, not very technical solution is to use Libre Office and Inkscape to produce an SVG file.
Import the picture into Libre Office - wrap the text around the image - save as PDF - open Inkscape - save as SVG - import the SVG in your Webpage - done.

Thanks everybody for helping me and for your inputs !

Wrapping text around an image with indentation and justify

img {
    float: left;
    margin: 0 20px 20px 0;
}

p {
    text-align: justify;
    text-indent: 2em;
}

Here's the fiddle: http://jsfiddle.net/9VkQR/

shape-outside of an image centered between two text blocks

shape-outside can only be used with float element but when making the container a flex one the float property you set will no more be considered.

You can consider two container where you will have a float element in each one and you make both circle overlap to create the illusion of only one:

div.box {  font-size: 0;  max-width: 600px;}
div.box p {  width: 50%;  display: inline-block;  font-size: initial;  vertical-align: top;  text-align: justify;}
div.box p:before {  content: "";  width: 75px; /*half the height*/  height: 150px;  margin-top: 30px;   background-image: url(https://picsum.photos/300/300?image=1069);  background-size:150px 150px;}
div.box p:first-child:before {  float: right;  shape-outside: circle(55% at right calc(50% + 15px));  background-position:left;  border-radius: 150px 0 0 150px;}
div.box p:last-child:before {  float: left;  shape-outside: circle(55% at left calc(50% + 15px));  background-position:right;  border-radius: 0 150px 150px 0;}

<div class="box">  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.  </p>  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.Lorem ipsum dolor    sit amet, consectetur adipisicing elit. Ex sapiente iste repudiandae aspernatur, illum esse veniam eligendi, dolor consequuntur iure, cumque laudantium quidem ratione perferendis minima dignissimos debitis! Sed, placeat.  </p>
</div>

CSS wrap text around geometric images

I believe this is what you are looking for ^^: JSFiddle. Do notice I changed the html in the JSFiddle a little bit.

HTML

<div class="main-content">
            <div class="left">
                <p> In a one horse open sleigh.</p>
            </div>
            <div class="right"> 
                <p>Oh the weather outside is frightful</p>
            </div>
    <img class="christmas-tree" src="http://www.raidersleafs.com/images/christmas-tree.png" />
        </div><!--main-content-->

CSS

.main-content {
    position: relative;
    width: 1000px;
    margin: auto;
}
/*align image to center (horizontal) and place it by absolute positioning (so the
  image is always appearing on the same spot) after placing it we will create an
  empty spot so the text will appear to flow around the image*/
img.christmas-tree  {
    position: absolute;
    left: calc(50% - 215px);
    width: 430px;
}
/*Just some text assigned to the right div*/
.right{
    width: 50%;
    float: right;
}
/*We will create empty space where the christmas tree is by adding blank content
 with ::before*/
.right::before{
    content: "";
    height: 550px;
    shape-outside: polygon(50px 0, 50px 150px, 215px 550px, 0 550px);/*this cuts out
        a part of the block so the text can freely move around. The values in here
        are coördinates in this blank content that allow text to float around it.*/
    width: 100%;
    float: left;    
}
.left{
    width: 50%;
    float: left;
    clear: left;
    text-align: right;
}
/*We will create empty space where the christmas tree is by adding blank content
  with ::before*/
.left::before{
    content: "";
    shape-outside: polygon(450px 0px, 450px 150px, 270px 550px, 500px 550px); /*this
                     cuts out a part of the block so the text can freely move around*/
    height: 550px;
    width: 100%;
    float: right;
}

A few final notes:

• The polygon is kinda hard to explain, but you basically add some points (imagine lines between the points) to "cut" out some part of a block or image. The site Chris Hollenbeck recommended explains it better than I can.
• A big part of my solution relies on knowing exact coordinates of the christmas-tree. To make it work with a flexible size tree will be a lot harder.
• I expect many browsers do not support shape-outside:. If you know what browsers do and do not leave a comment ^^.

---

Related Topics