Search code examples
csshtmlfigure

How does one wrap a paragraph on the right side of a floated-left <figure>


How does one wrap a paragraph around the right side of a floated-left <figure>, using inline css only? <figure>


Solution

  • Using inline css (as requested), just add float: left; to the <figure>.

    Also, the <figure> markup will need to come before the <p>

    <!DOCTYPE html>
    <html>
    <body>
    
    <figure style="float: left; margin: 15px 30px;">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/JPEG_example_subimage.svg/256px-JPEG_example_subimage.svg.png"/>
    </figure>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor a sem eu fermentum. Sed sed ipsum velit. Duis vitae arcu tempor, eleifend urna nec, dictum libero. Vivamus quis lacinia ipsum. Nulla ut lorem in arcu eleifend efficitur in non sapien. Suspendisse rutrum risus sit amet rutrum lobortis. Nam commodo bibendum ultrices. Fusce ut nulla facilisis, viverra nisi ut, porttitor odio. Donec fermentum, justo in congue dictum, nulla turpis laoreet erat, eget ultrices nisi enim dignissim libero. Nulla aliquam volutpat turpis, non rutrum odio mollis vitae. Duis gravida, nisi id ultricies lobortis, tellus nibh tristique ante, non viverra purus mi sit amet metus. Aliquam erat volutpat. Nunc quis fermentum diam, vel consequat lectus. Sed interdum, enim vitae viverra accumsan, enim mi volutpat ipsum, id cursus lectus nulla et nibh. Vestibulum lectus enim, imperdiet sit amet vestibulum malesuada, ornare eget elit. Ut suscipit eros quis mauris euismod, quis convallis tellus sagittis. Nunc ullamcorper turpis vel eros aliquam, interdum sollicitudin lacus eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor a sem eu fermentum. Sed sed ipsum velit. Duis vitae arcu tempor, eleifend urna nec, dictum libero. Vivamus quis lacinia ipsum. Nulla ut lorem in arcu eleifend efficitur in non sapien. Suspendisse rutrum risus sit amet rutrum lobortis. Nam commodo bibendum ultrices. Fusce ut nulla facilisis, viverra nisi ut, porttitor odio. Donec fermentum, justo in congue dictum, nulla turpis laoreet erat, eget ultrices nisi enim dignissim libero. Nulla aliquam volutpat turpis, non rutrum odio mollis vitae. Duis gravida, nisi id ultricies lobortis, tellus nibh tristique ante, non viverra purus mi sit amet metus. Aliquam erat volutpat. Nunc quis fermentum diam, vel consequat lectus. Sed interdum, enim vitae viverra accumsan, enim mi volutpat ipsum, id cursus lectus nulla et nibh. Vestibulum lectus enim, imperdiet sit amet vestibulum malesuada, ornare eget elit. Ut suscipit eros quis mauris euismod, quis convallis tellus sagittis. Nunc ullamcorper turpis vel eros aliquam, interdum sollicitudin lacus eleifend.
    </p>
    
    </body>
    </html>