3

I'm trying to create a 2 column layout around an image but no success

This is what I want the layout to be:

enter image description here

This is what I can do so far:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        
        img {
            float: right; 
            margin: 5px;
        }
        p {
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
      
    <div class="square">
        <div> 
            <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt=""> 
        </div>
        <!-- <div style="column-count: 2">  -->
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.

            Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
        </p>
        <!--</div>-->
    </div>
</body>
  
</html>

if I activated the div with column style 2, the layout will be a mess like this:

enter image description here

What is the solution for this? It's been days and I haven't found any solution yet. Please help.

UPDATE

Sorry, forgot to mention that the sentences must be continuous, so when a sentence is not completed in left column, it will be continued to right column under the image.

Henry Gunawan
  • 922
  • 3
  • 18
  • 38
  • Does this answer your question? [Wrapping text around an image with indentation and justify](https://stackoverflow.com/questions/15209389/wrapping-text-around-an-image-with-indentation-and-justify) – Cornel Raiu Jan 03 '22 at 04:42
  • sorry, no. That only have 1 column – Henry Gunawan Jan 03 '22 at 06:14
  • You have fixed the width of the image and you seem to therefore fix the width of the second column to correspond, is that right? I don't think column-count can help there if it's creating equal width columns. You may have to resort to Javascript, is that allowable? – A Haworth Jan 03 '22 at 06:49
  • yes, javascript is allowable. – Henry Gunawan Jan 03 '22 at 08:01

4 Answers4

1

Make the text into two paragraphs, place the image in the second one, and float it to the top.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        
        img {
            float: right top; 
            margin: 5px;
        }
        p {  
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
      
    <div class="square">
       <div style="column-count: 2"> 
  
        <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.</p>
   <p>   <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">  
            Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
        </p>

       </div>
    </div>
</body>
  
</html>
JMP
  • 4,417
  • 17
  • 30
  • 41
  • This cannot work in a general case where you don’t know where the column break will come. Also, what does float top mean? – A Haworth Jan 03 '22 at 06:19
  • @AHaworth; breaks in text are simple enough to make. `top` makes the element rise to the top. I didn't think I'd need it, as the image is already top, but without it the result is mangled. `right` on the other hand doesn't appear to do anything, but OP might need it for something else. – JMP Jan 03 '22 at 07:35
  • I didn't think float: top existed in CSS. – A Haworth Jan 03 '22 at 07:38
0
  1. Try wraping it using table like this

img {
    float: right;
    margin: 5px;
}

p {
    font-size: 20px;
}
<table>

    <tr>

        <td  width="70%">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
                Donec auctor justo eu lobortis finibus.

                Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
                quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
                orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
                imperdiet arcu quis neque maximus, vel molestie est rutrum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
                Donec auctor justo eu lobortis finibus.

                Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
                quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
                orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
                imperdiet arcu quis neque maximus, vel molestie est rutrum.
            </p>
        </td>

        <td width="40%">
            <img style width="100%"
                src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg"
                alt="">


        </td>
    </tr>



    <tr>

        <td width="60%">

        </td>
        <td width="20%">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias amet adipisci, possimus illo animi
            maiores vitae corrupti. Similique suscipit, unde cupiditate sequi, sed rerum non officiis nisi nesciunt
            quo vero ab reprehenderit quae ad aut saepe voluptate? Aliquam sint similique quibusdam iure
            perspiciatis at quidem facere autem, iste velit in omnis! Atque repudiandae cupiditate ab nemo suscipit
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
            tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
            dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
            Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
            pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
            Donec auctor justo eu lobortis finibus.

            Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
            quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
            orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
            imperdiet arcu quis neque maximus, vel molestie est rutrum.

        </td>

    </tr>


</table>
Cornel Raiu
  • 2,758
  • 3
  • 22
  • 31
Manjeet deswal
  • 692
  • 2
  • 5
  • 18
  • Sorry, forgot to mention that the sentences must be continuous, so when a sentence is not completed in left column, it will be continued to right column under the image. I don't think table will be able to do that. – Henry Gunawan Jan 03 '22 at 06:20
0

    div {
            margin: 2px;
        }

        #app {
            display: flex;
        }

        .vd-grid-left-col {
            display: flex;
            flex-wrap: wrap;
            flex-basis: 70%;
            justify-content: space-between;
        }

        .main {
            width: 100%;
            background-color: blue;
        }

        .vd-grid-right-col {
            display: flex;
            flex-direction: column;
            flex-basis: 30%;
        }

        .feature {
            width: 100%;
            background-color: grey;
        }


        img {
            width: 100%;
            margin: 5px;
        }

        p {
            font-size: 20px;
        }
<!DOCTYPE html>
<html>

<head>
    <title>
        Wrapping an Image with the text
    </title>
</head>
<body>
    <h1>Testing</h1>

    <div id="app">
        <div class="vd-grid-left-col">
            <div class="main">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                    tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                    dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                    Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                    pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
                    Donec auctor justo eu lobortis finibus. Proin ultrices bibendum odio, eu sodales metus ultricies a.
                    Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh
                    ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis
                    efficitur,
                    in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.</p>
            </div>

        </div>
        <div class="vd-grid-right-col">
            <div class="feature">
                <img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
                    alt="nature" width="500" height="300">
            </div>
            <div class="feature">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
                    tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
                    dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
                    Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
                    pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.                       
                    
                </p>
            </div>
        </div>
    </div>
</body>
Himesha Patel
  • 143
  • 7
0

Weil, I finally managed to solve it. Here's my solution:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        div {
          column-count: 2;
          position: relative;
          padding-top: 33%;
          font-size: 20px;
          column-gap: 5%;
        }

        div img {
          position: absolute;
          top: 0;
          right: 0;
          width: 47.5%;
        }

        .first-el {
          margin-top: -70%;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
    
    <div>
        <img src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg">

        <p class="first-el">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
    </div>
</body>
  
</html>

The image is positioned absolute on top right. It will be placed over the text so I used padding-top in the container and negative margin top in first element of the container which is first-el class to make a space for the image. Both padding-top and margin-top are in percentage to make the room responsive to image's height.

I hope this can help someone who have similar issue.

Henry Gunawan
  • 922
  • 3
  • 18
  • 38