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%;
}
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
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
Perfect, both of those worked great for me. Thanks a lot.
system
Closed
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.