How to wrap text around an image using HTML CSS

Question

I want to design a block of text like the following picture     Question whether this is possible

User · Answer

Addition to BeNdErR s answer  The  other TEXT  element should have float none  like     x000D   x000D       lt div style  width 100    gt  x000D           lt div style  float left width 30   background red   gt    something something something  random text lt  div gt  x000D           lt div style  float none  background yellow   gt  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

If the image size is variable or the design is responsive  in addition to wrapping the text  you can set a min width for the paragraph to avoid it to become too narrow  Give an invisible CSS pseudo-element with the desired minimum paragraph width  If there isn t enough space to fit this pseudo-element  then it will be pushed down underneath the image  taking the paragraph with it    container before     content         display  table    width  10em        Min width required       floated      float  left      width  150px      background  red

User · Answer

With CSS Shapes you can go one step further than just float text around a rectangular image   You can actually wrap text such that it takes the shape of the edge of the image or polygon that you are wrapping it around   DEMO FIDDLE  Currently working on webkit - caniuse    x000D   x000D   oval   x000D    width  400px  x000D    height  250px  x000D    color   111  x000D    border-radius  50   x000D    text-align  center  x000D    font-size  90px  x000D    float  left  x000D    shape-outside  ellipse    x000D    padding  10px  x000D    background-color  MediumPurple  x000D    background-clip  content-box  x000D    x000D  span   x000D    padding-top  70px  x000D    display  inline-block  x000D    x000D   lt div class  oval  gt  lt span gt PHP lt  span gt  x000D   lt  div gt  x000D   lt p gt 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 x000D    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 x000D    software like Aldus PageMaker including versions of Lorem Ipsum 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 x000D    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 x000D    Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy x000D    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 x000D    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  lt  p gt  x000D   x000D   x000D    Also  here is a good list apart article on CSS Shapes

User · Answer

you have to float your image container as follows   HTML   lt div id  container  gt       lt div id  floated  gt    some other random text lt  div gt              some random text          lt  div gt    CSS   container      width  400px      background  yellow     floated      float  left      width  150px      background  red      FIDDLE  http   jsfiddle net kYDgL

[html] How to wrap text around an image using HTML/CSS

Examples related to html

Examples related to css