Stop text from wrapping around image

Question

I want to stop text from wrapping around image. Is there any way to do this without using margin?

HTML:

<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.

Here is what I have currently:

img{
    margin-bottom: 2.5em;
}

JSFiddle Demo

Answer 1

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

Answer 2

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

Answer 3

As a general rule here are some best practices to improve your css and html skills:

1) Always separate images and texts in the corresponding tags: <img src=""> for images and <p> or <div> or <span> for texts.

2) As a general rule, separate your content (html) and your style (css) as much as possible.

3) To understand how CSS works you have to learn the box model. Here is an excellent article to get you going: http://css-tricks.com/the-css-box-model/

This box model will help you with your problem.

Answer 4

Using a WordPress plugin

Insert [clearboth] in the Text editor (won't be removed by the Visual editor) with:

1. ClearBoth plugin or
2. Simple Breaks plugin.