I want to stop text from wrapping around image. Is there any way to do this without using margin
?
img {
margin-bottom: 2.5em;
}
<strong><img style="float: left;" src="https://www.google.com/images/srpr/logo11w.png" width="100" height="67" />Text here. Text here. Text here. Text here.
<br />Text here. Text here. Text here. Text here. Text here. Text here.
<br />Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.
<br />Text here. Text here.Text here. Text here.Text here. Text here.
JSFiddle Demo
You'll have to wrap your text in its own container.
Since your <img>
is floated to the left, you can use overflow: hidden
on your newly-added container to achieve no wrapping of the text.
However block elements shouldn't be descendants of <strong>
elements, you may want to rethink this tag.
img {
width:100px;
height:67px;
float:left;
}
div {
overflow:hidden;
}
<article>
<img src="https://www.google.com/images/srpr/logo11w.png" />
<div>
Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
Text here. Text here.Text here. Text here.Text here. Text here.
Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
Text here. Text here.Text here. Text here.Text here. Text here.
</div>
</article>
JSFiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With