CODEWITHSUNDEEP
htmlcss
jdost_26
jdost_26

Reputation: 415

Wrapping text around an image in a grid

I am new to CSS and fiddling with grids, but I am having trouble finding a reasonable way to have a grid with two rows and two columns, where:

Upper left cell: button and TEXT starts Upper right cell: picture Lower left cell: TEXT continues Lower right cell: TEXT continues

.row {
display: grid;
  grid-template-columns: 0.1fr 0.35fr 0.55fr;

  grid-auto-flow: row;
  grid-template-rows: auto;
  
  .button {
  text-align: center;
}

.text {
  grid-column-start: 1;
  grid-column: span 2 / span 2;
  grid-row-start: 2;
  
}

.img {
 float: right;
}
<div class="row">
     <div class="upper-right-cell">
        <span class="button">Button</span><br /><span class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
        </span>
      </div>
      <div class="upper-right-cell"><img src="https://www.w3schools.com/Css/pineapple.jpg">
       
      </div>

The text should be starting just under the BUTTON, where is is, but then when the image ends, the text should continue under the image into the second column.

I have lost the forest from the trees.

Upvotes: 5

Views: 1934

Answers (1)

userDuR
userDuR

Reputation: 418

I achieved your goal without using grid. If you never mind removing grid, this snippet will help you. Otherwise just discard my answer.

<!DOCTYPE html>
<html>
<head>
    <title>
        Wrapping an Image with the text
    </title>
    <style>
        /* This div design part is
            used as an Image */
        .upper-right-cell {
            width: 400px;
            height: 100px;
            float: right;
        }
    </style>
</head>

<body>
    <div class="upper-right-cell">
        <img width="400" height="100" src="https://www.w3schools.com/Css/pineapple.jpg">
    </div>
    <div class="upper-left-cell">
        <span class="button">Button</span><br /><span class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
        </span>
      </div>
</body>
</html>

Reference : https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/

Upvotes: 6

Related Questions