1

How can I stop this text from moving past this image? I want to have three different items like this one in a left to right layout. Thanks! HTML and CSS code is included. TIA for any help!

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
<div class="row">
    <div class="side">
      <h2>How is data erased</h2>

      <p>All magnetic data is erased according to DOD standard 5220-22M making data unrecoverable so your information is secure</p>

      <img src="https://servelasopa377.weebly.com/uploads/1/2/5/6/125601160/367338583.png" style="height:200px;" alt="">
      
     
   
    </div>
  </div>
Jake Lowe
  • 72
  • 7

2 Answers2

0

Without specifying the width of the column containing both text and image you are going to find this tricky.

Either:

  • Use JS to programatically adjust the width of the paragraph based off the rendered image
  • Make the image full width (as below)
  • Specify a fixed with for everything in the column and set all children to that width

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

img {
width: 100%;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
<div class="row">
    <div class="side">
      <h2>How is data erased</h2>

      <p>All magnetic data is erased according to DOD standard 5220-22M making data unrecoverable so your information is secure</p>

      <img src="https://servelasopa377.weebly.com/uploads/1/2/5/6/125601160/367338583.png" alt="">
      
     
   
    </div>
  </div>
Alex
  • 2,651
  • 2
  • 25
  • 45
-1

Try using CSS columns and put the text and image in the same column.

goldenbanana42
  • 130
  • 8