Text wrap around image

Trying to achieve this(image attached)

<div class="training-heading">
    <h2 class="tHeading" >Training Programs We Offer For YOU</h2>
    <div class="tImg"><img src="./Assets/dumbles.png" alt=""></div>
</div>

<div class="training-heading">
    <h2 class="tHeading" >Training Programs We Offer For YOU</h2>
    <div class="tImg"><img src="./Assets/dumbles.png" alt=""></div>
</div>

Tried this:

.training-heading{
    position: relative;
}
.tImg{
    position: absolute;
    top: 0%;
    right: 0%;
    height: fit-content;
    border: #2B2B2B 1px solid;
}

.training-heading{
    position: relative;
}
.tImg{
    position: absolute;
    top: 0%;
    right: 0%;
    height: fit-content;
    border: #2B2B2B 1px solid;
}

and also float: right, didn't work

12 Replies

b1mind•3y ago

The one great use for float and shape-outside

b1mind•3y ago

https://codepen.io/b1mind/pen/qBbrqgj ignore the first example

Brent Morton

CodePen

Shape Outside Grid

...

13eck•3y ago

Yeah, you're looking for the float property not position

Abdul Ahad⚡OP•3y ago

https://codepen.io/ahad4387/pen/bGMmjBN

ahad4387

CodePen

bGMmjBN

...

Abdul Ahad⚡OP•3y ago

I'm doing something wrong there

13eck•3y ago

<div class="training-heading">
  <img class="tImg" src="https://raw.githubusercontent.com/AhadWeb3/Fitness-Landing-Page/master/Assets/hand-grip%201.png" alt="">
  <h2 class="tHeading" >Training Programs We Offer For YOU</h2>
</div>

<div class="training-heading">
  <img class="tImg" src="https://raw.githubusercontent.com/AhadWeb3/Fitness-Landing-Page/master/Assets/hand-grip%201.png" alt="">
  <h2 class="tHeading" >Training Programs We Offer For YOU</h2>
</div>

Float only works within the parent element. You had the image in a different element entirely so it couldn't float with the heading In addition, floats need to come before the element that you want it to float around, b/c otherwise the block level element will take up the entire width

Abdul Ahad⚡OP•3y ago

Ah, now I get it

Abdul Ahad⚡OP•3y ago

done

13eck•3y ago

WOO! If you'd like to learn more about floating: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Abdul Ahad⚡OP•3y ago

should i approach all these with float

13eck•3y ago

float is designed to allow images to float alongside text (IE have text wrap around the image). If that's what you want, then yes But if the images are supposed to be on their own then flex or grid would be more appropriate

Abdul Ahad⚡OP•3y ago

Okay, I'll use grid and flex, will update you once done. Thanks, mate. I can also use clip-path right? instead of shape-outside. it gives more control

Gaming

Programming

Text wrap around image