Clever Geek Handbook

Stop text from wrapping around an image

I want the text not to wrap around the image. Is there a way to do this without using it 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.
Run codeHide result


JSFiddle Demo

+5


source to share


4 answers


You will need to wrap your text in your own container.

Since yours <img>

moves to the left, you can use overflow: hidden

in the container you just added to avoid text wrapping.

However, block elements do not have to be children of elements <strong>

, you can 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>
Run codeHide result


JSFiddle

+16


source


Put your img in a DIV wrapper and clear that

CSS

.wrapper{
    clear:both;
}

HTML:

<div class='wrapper'><img src='..'></div>
text here. text here...


Here's the JsFiddle

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

<img src="..."><br>

JsFiddle here

+3


source


Typically, here are some guidelines for improving 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 need to study the window model . Here's a great article to help you: http://css-tricks.com/the-css-box-model/

This box model will help you with your problem.

+1


source


Using a WordPress plugin

Paste the Text[clearboth]

into the editor (it will not be removed by the Visual editor ) with

0


source






More articles:


All Articles