How to Float Paragraph Next to Image Without Wrapping the Image

How to float paragraph next to image without wrapping the image?

You can do it with some JavaScript:

document.getElementById('content').style.width = (    document.getElementById('wrapper').offsetWidth -    document.getElementById('logoimg').offsetWidth - 10) + "px";

#logoimg { float: left; }#content { float: left; padding-left: 5px; margin:0; }.clearer { clear: both; }

<div id="wrapper"><img id="logoimg" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />    <div id="content">A Fehér Kéményseprőket is bevonta a Fidesz a bajban lévő hitelesek megsegítéséről szóló törvényjavaslat kidolgozásába. A Rogán Antal és Kósa Lajos által bejelentett törvénycsomagról konkrétumokat továbbra sem tudni, a politikusok az egyeztetések lezártával ígérik nyilvánosságra hozni az összefésült javaslatokat. A tárgyalásba bevont, magát civil egyesületként definiáló Fehér Kéményseprők szervezet a radikális jobb- és baloldalon is igen népszerű, rendezvényein az Antifasiszta Liga és a kommunisták mellett gárdisták is felbukkannak. A Fidesz szerint a kéményseprők jól ismerik az érintettek problémáit. Az asztalnál ülő egy másik szervezet annyira jól ismeri a problémákat, hogy megoldásként javasolja: az elmúlt években elszenvedett árfolyamveszteséget a bankok "adják vissza" a hiteleseknek.</div>    <div class="clearer"></div></div>

Float text against image without wrapping underneath

Try setting overflow: auto to the paragraph:

.textChunk p { overflow: auto; }

This causes a new block formatting context to be created and the left edge of the block will not go beyond the edge of the float (that is, wrap around).

See demo at: http://jsfiddle.net/audetwebdesign/tPC4z/

CSS - make paragraph text wrap around image without float

This question seems to be concerned about the why over the how, so I'll focus on the inner-workings:

The Visual formatting model section of the CSS 2.1 spec describes inline formatting contexts:

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The property they describe is vertical-align which takes a number of different values, baseline being the default. This is why your two inline elements appear as they do, by sitting on the baseline. You could change the  to vertical-align: top, and the top of the first line of text will align with the top of the image. However, you will still get a gap between the first line of text and the following lines.

This is because the text is rendering one line-box to the next, vertically. Regardless if the line-box of the first line is larger than the rest, it will still flow one line-box at a time. Here’s a visualization of this concept:

Sample Image

Another important concept in understanding this is that <img> is a replaced inline element, which means its appearance is constructed by an external resource outside of the document. replaced inline elements can take a height value, while so-called non-replaced inline (like a ) elements cannot. This is why <img> foo can behave differently than foo bar (because the image has an intrinsic height), even though they are all inline elements. Imagine setting the height of the image to the x-height of the text -- it would effectively render the same as your image, but in this case it behaves exactly as you would expect:

img {
  height: 10px;
  }

p { 
  display: inline;
  }

<div>
    <img src="http://placehold.it/100x100/E8117F/000.png">
    <p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
</div>

Paragraph wont wrap around an image

Only inline elements flow around floated elements, but both the h1 and p tags are block elements. You can change both of their displays to inline-block however a better solution would probably be just to put the img inside the p tag with the text itself (since text has inline styling by default and will naturally flow around your floated image).

.container { width: 80%; margin: auto;}
#about { min-height: 500px; padding: 40px 100px;}
#about img { float: right;}

<section id="about"> <div class="container">   <h1>About</h1>   <p><img src="https://picsum.photos/250/250">Lorem ipsum dolor sit amet</p> </div></section>

CSS to stop text wrapping under image

Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:

This answer was specific to the OP's question (Which had the width set in the examples). While it works, it requires you to have a width on each of the elements, the image and the paragraph. Unless that is your requirement, I recommend using Joe Conlin's solution which is posted as another answer on this question.

The span element is an inline element, you can't change its width in CSS.

You can add the following CSS to your span so you will be able to change its width.

display: block;

Another way, which usually makes more sense, is to use a  element as a parent for your .

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Since  is a block element, you can set its width using CSS, without having to change anything.

But in both cases, since you have a block element now, you will need to float the image so that your text doesn't all go below your image.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

P.S. Instead of float:left on the image, you can also put float:right on li p but in that case, you will also need text-align:left to realign the text correctly.

P.S.S. If you went ahead with the first solution of not adding a  element, your CSS should look like so:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Wrapping text around image (no floats)

Here you go mate.

Just put align: left on the img tag in the HTML.
http://jsfiddle.net/zYyza/2/

HTML:

    <a href="http://www.cleanwaterstore.com/FE008960-p-mangox-iron-filters.html"><img align="left" src="https://cleanwater.infusionsoft.com/jspServ/imagegetter.jsp?url=http://cws-intranet.net/Drawings/mangox-iron-filter.png" style="width: 80px" class="img_floats" /></a>
    <a style="clear:left;" href="http://www.cleanwaterstore.com/FE008960-p-mangox-iron-filters.html"><img class="info_button"  src="http://www.cleanwaterstore.com/images/products/More%20Info.gif"></img></a>

<p> <b>MangOX Iron Filter</b> 
    <br>
    <br>The MangOX Iron Filter is a powerful and effective system for removing iron and manganese from well water. This system automatically removes iron, manganese, and sediment without the use of filter cartridges or chemicals. The iron filter is easy to install by any plumber or person familiar with basic plumbing.
    <br>
    <br>The MangOX Iron Filter removes both dissolved and oxidized iron and manganese by using a special type of solid manganese oxide media which traps the iron and then automatically backwashes out the trapped rust and sediment to drain.
    <br>
    <br>The backwash lasts for approximately 15 minutes and takes place automatically, typically every 2 - 3 days, in the middle of the night when no water is being used.
    <br>
    <br>An optional chlorine solution tank is available to backwash the MangOX filter media with a chlorine rinse, which kills iron bacteria and can extend the life of the MangOX media for many years. For waters containing “rotten-egg odors” (hydrogen sulfide), a chlorine feed ahead of the MangOX filter can be used to kill the odor and keep the MangOX media working great.
    <br>
    <br>Unlike many residential and small commercial iron filters, the MangOX 7000 system will not restrict flow rate or cut down on water pressure in the home. The system uses a high quality Vortech filter tank which requires less backwash water, saving water and energy.
    <br>
    <br>Unlike the media inside the Greensand and Birm iron filters which often must be changed every 3 to 5 years, the MangOX media lasts for more than 10 years.</p>

CSS:

    .info_button {
        width: 91px;
        height: 34px;
        margin-top: 15px;
        padding-right: 25px;
        font-family: tahoma;
    }
    .img_floats {
        padding-right: 25px;
    }

Why Paragraph don't align next to Image in HTML?

floatting element should come first/ahead in code from element in the natural flux.

see (among others links you can find on search engines) : https://css-tricks.com/all-about-floats/

body {  background-color: #DCDBD9;  color: #2C2C2C;  font: normal 100% Cambria, Georgia, serif;}h1 {  font-size: 1.5em;  font-style: italic;  font-weight: normal;}h1 a {  color: #747474;  font: bold 0.45833em Calibri, Optima, Arial, sans-serif;  letter-spacing: 0.15em;  text-transform: : uppercase;  text-decoration: none;}#page {  margin: 36px auto;  width: 90%;}#nav {  float: right;  /*padding: 42px 0 0 30px;*/}#nav li {  float: left;  margin: 0 0 0 5px;}.blog {  clear: both;  margin: 50px auto 53px;  width: 93.75%;}.blog .main {  float: left;  width: 62.88%;  /* 566px / 900px */}.blog .other {  float: right;  width: 36.77%;  /* 331px / 900px */}.lede {  padding: 0.8em 5.333%;}.recent-entries {  margin: 0 auto;  width: 69.788%;  /* 231 / 331px */}.article {  padding: 40px 8.480%;}.date {  float: left;  margin-left: -17.088%;  /* 81px / 474px */  width: 14.55%;  /* 69px / 474px */  border: 1px solid black;  border-radius: 2px;  padding: 0.59%;  transition-property: background;  transition-duration: 0.3s;  transition-timing-function: ease;}.date:hover {  background: #9c3;}img,embed,object,video {  max-width: 100%;}.figure {  float: right;  margin-bottom: 0.5em;  margin-left: 2.531%;  /* 12px / 474px */  width: 48.734%;  /* 231px / 474px */}h2 {  color: #F90B6D;  font-family: 'Open Sans', sans-serif;  font-size: 1.2em;  font-weight: 300;}p {  color: #222;  font-family: 'Open Sans', sans-serif;  font-size: 0.9em;  font-weight: 400;}

<!--  <h1> This is the top header! <a href="#"> Read More </a> </h1> -->
<div id="page">
  <ul id="nav">    <li><a href="#">About me</a>    </li>    <li><a href="#">About Blog</a>    </li>    <li><a href="#">Stuff</a>    </li>    <li><a href="#">Junk Stuff</a>    </li>  </ul>  <div class="blog section">    <h1 class="lede">Responsive Blog </h1>    <div class="main">
      <div class="article">        <div>          <div class="date">            1 Sept 2015          </div>          <div class="figure">            <p>              <img src="http://dummyimage.com/290x400&text=Dont-Forget-To-Follow-Up" alt="Sample Image">              <b class="figcaption">Remember This</b>            </p>          </div>          <h2> What is Lorem Ipsum ?</h2>          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                  </div>
        <div class="date">          5 Sept 2015        </div>        <h2> Where does it comes from ? </h2>        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked          up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus          Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from          a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original          form, accompanied by English versions from the 1914 translation by H. Rackham.</p>

      </div>    </div>    <!--/end.main -->    <div class="other">      <p>Recent Enteries</p>      <div class="recent-entries">        <p>1.Simply First Entry</p>        <p>2. Simply second Entry</p>      </div>    </div>    <!-- /end .other -->  </div>  <!--/end .blog.section --></div><!-- /end #page-->

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

Paragraph's won't wrap around image

It's because the image is below the text. Text after the right floated image would flow around the image. Text that proceeds it has already been laid out and is not affected by later content.

Move the image up above the text to see the desired layout.

How to Float Paragraph Next to Image Without Wrapping the Image