Face Code Face Code - 3 months ago 9
CSS Question

How can I make the title and text wrap around this image?

I want the text and title to wrap around this time. I've tried

float: left
and
line-height: top
. How can I solve this problem? It should look like this:

Visual Aid



#verse_div {
width: 1080px;
font-family: 'Cambay', sans-serif !important;
position: relative;
left: 245px;
top: 30px;
padding: 5px;
}

.verse_section {
width: 293px;
border: 1px solid blue;
display: inline-block;
padding: 10px;
position: relative;
top: 0;
height: auto;
float: left;
margin-right: 10px;
margin-bottom: 50px;
position: relative;
left: 55px;
}

.verse_title {
font-size: 17px;
color: #00707C;
font-weight: bold;
text-transform: capitalize;
}

.verse_info {
text-indent: 25px;
display: inline-block;
}

#verse_1 .verse_info, #verse_2 .verse_info, #verse_3 .verse_info {
margin-bottom: 20px;
}

.verse_img {
width: 65px;
height: 80px;

<div id='verse_div'>
<!-- #1 -->
<div class='verse_section'>
<div class='verse_body' id='verse_1'>
<span class='verse_title'> First Title </span> <br>
<span class='verse_info'>
<img src='https://www.lds.org/bc/content/shared/content/images/leaders/d-todd-christofferson-large.jpg' class='verse_img'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum feugiat erat molestie venenatis. Donec a libero ac nisl fringilla interdum. Curabitur massa neque, suscipit id ullamcorper nec, aliquam vel massa. Etiam fringilla leo eu suscipit vehicula. Nulla facilisi. In et convallis diam. Proin vitae est in orci rutrum viverra. In at rhoncus magna. Proin convallis, dolor vitae feugiat sodales, ex velit aliquet ante, ut vehicula dui magna ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eleifend odio tincidunt, finibus velit vitae, viverra velit. Donec finibus semper sem, ut hendrerit diam. Nulla ut purus eget purus tempus aliquam. Duis sodales lectus ut diam bibendum ultrices. Nullam placerat posuere lectus, non luctus diam porttitor non. Integer sed purus lobortis, varius ex in, vestibulum arcu.</span>
</div>

<div class='verse_body'>
<span class='verse_title'>Second Title</span> <br>
<span class='verse_info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum feugiat erat molestie venenatis. Donec a libero ac nisl fringilla interdum. Curabitur massa neque, suscipit id ullamcorper nec, aliquam vel massa. Etiam fringilla leo eu suscipit vehicula. Nulla facilisi. In et convallis diam. Proin vitae est in orci rutrum viverra. In at rhoncus magna. Proin convallis, dolor vitae feugiat sodales, ex velit aliquet ante, ut vehicula dui magna ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eleifend odio tincidunt, finibus velit vitae, viverra velit. Donec finibus semper sem, ut hendrerit diam. Nulla ut purus eget purus tempus aliquam. Duis sodales lectus ut diam bibendum ultrices. Nullam placerat posuere lectus, non luctus diam porttitor non. Integer sed purus lobortis, varius ex in, vestibulum arcu.
</span>
</div>
</div>
</div>




Answer

#verse_div {
  width: 1080px;
  font-family: 'Cambay', sans-serif !important;
  position: relative;
  left: 245px;
  top: 30px;
  padding: 5px;
}

.verse_section {
  width: 293px;
  border: 1px solid blue;
  display: inline-block;
  padding: 10px;
  position: relative;
  top: 0;
  height: auto;
  float: left;
  margin-right: 10px;
  margin-bottom: 50px;
  position: relative;
  left: 55px;
}

.verse_title {
  font-size: 17px;
  color: #00707C;
  font-weight: bold;
  text-transform: capitalize;
}

.verse_info {
  text-indent: 25px;
  display: inline;
}

#verse_1 .verse_info, #verse_2 .verse_info, #verse_3 .verse_info {
}

.verse_img {
  width: 65px;
  height: 80px;
 <div id='verse_div'>
       <!-- #1 -->
       <div class='verse_section'>
         <div class='verse_body' id='verse_1'><img src='https://www.lds.org/bc/content/shared/content/images/leaders/d-todd-christofferson-large.jpg' class='verse_img'align="left">
           <span class='verse_title'>  First Title </span><br>
           <span class='verse_info'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum feugiat erat molestie venenatis. Donec a libero ac nisl fringilla interdum. Curabitur massa neque, suscipit id ullamcorper nec, aliquam vel massa. Etiam fringilla leo eu suscipit vehicula. Nulla facilisi. In et convallis diam. Proin vitae est in orci rutrum viverra. In at rhoncus magna. Proin convallis, dolor vitae feugiat sodales, ex velit aliquet ante, ut vehicula dui magna ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eleifend odio tincidunt, finibus velit vitae, viverra velit. Donec finibus semper sem, ut hendrerit diam. Nulla ut purus eget purus tempus aliquam. Duis sodales lectus ut diam bibendum ultrices. Nullam placerat posuere lectus, non luctus diam porttitor non. Integer sed purus lobortis, varius ex in, vestibulum arcu.</span>
         </div>
         
         <div class='verse_body'>
           <span class='verse_title'>Second Title</span> <br>
           <span class='verse_info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum feugiat erat molestie venenatis. Donec a libero ac nisl fringilla interdum. Curabitur massa neque, suscipit id ullamcorper nec, aliquam vel massa. Etiam fringilla leo eu suscipit vehicula. Nulla facilisi. In et convallis diam. Proin vitae est in orci rutrum viverra. In at rhoncus magna. Proin convallis, dolor vitae feugiat sodales, ex velit aliquet ante, ut vehicula dui magna ut elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eleifend odio tincidunt, finibus velit vitae, viverra velit. Donec finibus semper sem, ut hendrerit diam. Nulla ut purus eget purus tempus aliquam. Duis sodales lectus ut diam bibendum ultrices. Nullam placerat posuere lectus, non luctus diam porttitor non. Integer sed purus lobortis, varius ex in, vestibulum arcu.
           </span>
         </div>
       </div>
   </div>