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

Tags:

Html

Css

Margin

Recent Posts