Help with text wrapping around image

HTML & CSS
1

How do I avoid the text wrapping around the image? I would like the text all to be kept in a clean rectangular.

<div class="steps row">
      <div class="step">
    
        <div class="img">
          <img class=" size-full wp-image-928 alignleft" src="http://keepercircle.com/wp-content/uploads/2015/05/1.jpg" alt="1" width="52" height="52" />
        </div>
        
        <div class="text">
          <h4>Create the perfect ouftit to go with the classic Chanel bag</h4>
        </div>
    
      </div>
    </div>


.step-icon {
 max-height: 300px;
}

.step {
 text-transform: none;
 text-align: left;
 margin: 0 auto;
 width: 65%;
}

704×378 29.8 KB

2

Where’s the rest of your code? I assume, that the .img{} div is floated? You’d just need to give .text{} a left margin equal to that of .img{}.

Or you can just simply float .text{} (which should be in addition to .img{}.)

However, that is entirely dependent on whetehr .img{} is floated. It should be. But you’ve given us almost no code :wink: . I can only guess.

Overall, I’d wonder why they are even floated, since you could get by with table/table-cell or even display:inline-block…but that’s another story.

3

Or if you don’t need visible overflow just add:

.text{overflow:hidden}

That will create a rectangular block to the side of a floated element (that assumes that .img is floated).

2 Likes
4

Perfect, both of those worked great for me. Thanks a lot.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.