logo
Tags down

shadow

css wrap text around an image ?


By : abhilash
Date : May 03 2020, 07:58 AM

I need to display a text and an image in a div block I have positioned the image a little lower in order to make it clear the the image is covering some text. The text should start in the top line, so above the image, but thereafter should continue to the right of the image.

I tried to do this with float:left on the image, which works but then all the text moves to the right of the image. When I use position:absolute the image is on top of the text. If I use float:left with transform: translateY then the text also shows to the right of the image and does not flow around the image.

I know  it is possible with the shape-outside property, but unfortunately many of my users not use supported browsers.

Wrap text around image with CSS

Answer :

it's only one line and the width of the image is known you can consider the below trick with negative margin and pseudo element:

try the following

p:before {
  content:"";
  display:inline-block;
  margin-right:-100px; /* Same as width */
}
img {
 float:left;
 margin-top:1.2em;
 margin-right:5px;
}

/*Clear float*/
p:after {
  content:"";
  display:table;
  clear:both;
}


<p style="font-size:25px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem
</p>

<p style="font-size:20px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem
</p>



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org