Help with text wrapping around image

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="" alt="1" width="52" height="52" />
        <div class="text">
          <h4>Create the perfect ouftit to go with the classic Chanel bag</h4>

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

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

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.

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


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


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

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