Float image going out of section

Question

I am trying to allign both img and text into one where image floats to left and text floats to right. The results I am trying to achieve: And this is my result: As you can see my image is going out of section for some reason

My current code:

 #intromessage {
        border: 1px solid #cccccc;
        text-align: right;
    }

    img {
        float: left;
        width: 50%;
        border: 1px solid #cccccc;
    }

<section id="intromessage">
            <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>
            <img alt="shoes" src="images/boots.png">
        </section>

Does this answer your question? [What is a clearfix?](https://stackoverflow.com/questions/8554043/what-is-a-clearfix) — ATP, Feb 21 '21 at 21:14

dale landry · Accepted Answer · 2021-02-23T23:52:54.217

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>

This has worked but I forgot to mention that I am doing mobile first approach and therefore the img tag has to stay on the bottom in the section, is it somehow possible to achieve the same results but have the img tag at the bottom of the section? — Dravenzo, Feb 21 '21 at 21:24
Yea just use an `@media` query for your mobile version that styles the image below. — dale landry, Feb 21 '21 at 21:25

score 0 · Answer 2 · answered Feb 21 '21 at 21:17

you can use grid view or flexbox to achieve that, but also you can go on with your code using position and define width of each element,

here is how to do it, try the snippet.

#intromessage {
position:relative;
width:100%;
  border: 1px solid #cccccc;

}
p {
  position: absolute;
  margin-left:52%;
}

img {
  position: relative;
  width: 50%;
  border: 1px solid #cccccc;
  margin-left:1%;
}

<section id="intromessage">
  <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>
  <img alt="shoes" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSg0p7vWEFpPD08JvLJgJsAKP0_EkTYg1v7og&usqp=CAU">
</section>

Float image going out of section

2 Answers2