Help with text wrapping around image

[awkward_clam]

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%;
}

[RyanReese]

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 . 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.

[PaulOB]

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).

[awkward_clam]

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