Stop text from wrapping around image
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
Put your img in a wrapper DIV and clear that
CSS:
.wrapper{
clear:both;
}
HTML:
<div class='wrapper'><img src='..'></div>
text here. text here...
Here's the JsFiddle
Or, simply remove all CSS and put "<br>" after the image:
<img src="..."><br>
JsFiddle here