CSS Float: Floating an Image to the Left of the Text

CSS Float: Floating an image to the left of the text

Is this what you're after?

I changed your title into a h3 (header) tag, because it's a more semantic choice than using a div.

Live Demo #1

Live Demo #2 (with header at top, not sure if you wanted that)

HTML:

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
   </div>
</div>

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}

Text floating left and image on the right

Use display: flex property on section and put h2 p tags in a separate tag . Also just put the img element below the h2 p element as shown in snippet .

You can read here for more about display: flex

section {
  display: flex
}
.imgTag{
width:50vw;
height:50vh
}

<section class="post-container">
  <span>
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
    mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>

  <img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

Float Image to Left of Paragraph (Text)

like this? it can be display flex, inline-flex, -webkit-box

 .floated-image {   float: left;   display:flex; }

<div class="floated-image"><img src="https://static.xx.fbcdn.net/rsrc.php/v1/yi/r/odA9sNLrE86.jpg" alt="Fox logo">  <p>The quick brown fox jumped over the log. <a>The fox is here.</a>  </p></div>

how to make a floating image left of the body contents?

If I am understanding your question correctly, although the image is placed to the left, you want the text body to remain inline.

Something like this? https://www.w3schools.com/code/tryit.asp?filename=GAUA12AA769P

<style>
    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

Most notibly I've added display: block; to the image and set a margin-left: 50px; on the text content.

EDIT
https://www.w3schools.com/code/tryit.asp?filename=GAUA575L092N

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        margin-top: 30px;
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

I've added the body styling back. There is a margin-top on the image which pushes it down to be centred against the text, but if you wanted the image to appear at the top left of the text just remove margin-top: 30px from the .post-thumb class.

A better option would be to use something like flexbox for this however.

EDIT 2:

I have updated my code to use flexbox, which is a much cleaner and concise solution. You can read more about here.

"This is an approach to layout creation, alignment of elements and
distribution of extra space.

Flex stands for flexible, adaptive. Flexboxes are thus flexible
elements of the layout. One of the main advantages of flexbox is the
ability to fill extra space without the need to use Javascript."

https://www.w3schools.com/code/tryit.asp?filename=GAUAC9HBCS2S

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .flex-item {
        display: flex;
        align-items: center;
    }

    .flex-item img {
        flex-grow: 0;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        margin-right: 15px;
    }
</style>

<body>
    <div class="flex-item">
        <img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg">
        <div>
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

Float image going out of section

Use display:flex; on the parent elements and wrap the h2 and p tag in a div so the two child divs in the parent element display as a flex row. The id='cont' element will have a display flex with flex-direction as column

EDIT: *as noted by the editor of this question, this question in its purest form does indeed have an answer which I will include for future persons looking at this answer...

The issue the OP was having is that they used a float on their img element. Without clearing that float their image was not floating to the left as they intended, but showing up underneath the sibling text content it was supposed to be floating to the left of. The image with the style float: left; is within the div intromessage, yet on the page it is outside that container div. Floated objects do not add to the height of the object they reside in. The issue was there was no clear: called on the float. To fix this we add an empty div element and style it with clear: left on a left floating div, or clear: right on a right floating div, or clear: both if you want to clear both the left and right float.

<div style="clear: both;"></div>

Important from MDN: The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it.

A more modern way to deal with this issue, is to use grid or flex, see snippit below:

#intromessage {
  display: flex;
  border: 1px solid #cccccc;
}

#cont {
  padding: 5px;
  display: flex;
  flex-direction: column;
}

h2{
  font-size: 1rem;
}

img {
  width: 50%;
  border: 1px solid #cccccc;
  padding: 5px;
}

<section id="intromessage">
  <img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
  <div id="cont">

    <h2>WELCOME TO BOOTWORLD</h2>
    <p>
      BootWorld is the largest online footwear retailer in the UK. <span> Our shop </span>always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not
      <span>send us a message.</span>
    </p>
  </div>

</section>

CSS floats: how to keep the float near the text it belongs to?

To clear the float which contains the dynamic content ie. image can have dynamic height, you'll need to clear the parent element itself.

.imagefloatright {
  clear: both;
}
.imagefloatright img {
  float: right;
}

It means that you need to use clear on the element which contains the floating elements.

For brevity, I would rename it like:

.clearfix {
  clear: both;
}
.float-right {
  float: right;
}

HTML

<p class="clearfix"><img class="float-right" src="step 1.png"/></p>
<ol>
    <li>
      <p>Step 1</p>
      <p class="clearfix"><img class="float-right" src="step 2.png"/></p>
    </li>
    <li>
      <p>Step 2</p>
      <p>Step 3</p>
    </li>
</ol>

Here's a demo.

Floating image with text; CSS not applied

The problem is with the code row>img. In CSS, the symbol > looks for the direct children from the parent. As per your code img is not the direct children. It is a grand children. So change your code

 .row>img{
   display: inline-block;
   float: left;
 }

.row img{
  display: inline-block;
  float: left;
}

UPDATE:

As per your comment below, you mentioned this is not working. Yes, you have to apply all the remaining styles here as you have added inline img tag like below.

.row img{
   margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
   float: left;
 }

Code Snippet

.row {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  margin-right: -15px;  margin-left: -15px;}
.row img{  margin-right:10px; margin-top:8.5px; width: 210px; height:194px;  float: left;}

<div class="container">  <div class="row">    <div class="col-lg-8 col-md-10 mx-auto">      <p style='float:right;' > <img src='img/ankulGupta.tiff'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>    </div>  </div></div>

Horizontally center text after floating image CSS HTML

Add this to your CSS:

.header { width: 40%; margin: 0 auto; }

and remove:

clear:both
display:inline

will give you:

.header_img {    float: left;}.header {    background:#000000;    font-size: 150%;    color: #666666;    font-family: ProximaNovaLight, Proxima Nova Light;    text-align: center;    margin: 0 auto;    width: 40%;}

<div class="header_img">    <a href="index.php" class="head">        <img border="0" src="images/logo.png" alt="Home" width="200" height="35"/>    </a></div><div class="header">    <a href="index.php" class="body">HOME</a><a href="contact.php" class="body">CONTACT</a></div>

CSS Float: Floating an Image to the Left of the Text