Stop Text From Wrapping Around Image

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

Solution 1:

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><imgsrc="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

Solution 2:

Put your img in a wrapper DIV and clear that

CSS:

.wrapper{
    clear:both;
}

HTML:

<div class='wrapper'><imgsrc='..'></div>
text here. text here...

Here's the JsFiddle

Or, simply remove all CSS and put "<br>" after the image:

<imgsrc="..."><br>

JsFiddle here

Solution 3:

Using html enter the following code:

<br clear="left">

This works for me using multiple WordPress sites.

-Callahan-

Solution 4:

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.

Solution 5:

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.