Wrapping <p> around an image

please see




how can i wrap my text

around the square of the chair image?

i thought

.panel-image {
  width: 250px;
  float: left;

would do it

help, please :slight_smile:

That float isn’t going to work if its inside a flex container.

Would you like to attempt creating a section with one side image and one side of content?


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image and Content Section</title>
        body {
            font-family: Arial, sans-serif;
            margin: 0;

        .section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;

        .image-container {
            flex: 1;

        img {
            max-width: 100%;
            height: auto;

        .content {
            flex: 1;
            padding: 20px;

        h2 {
            color: #333;

        p {
            color: #666;
            line-height: 1.5;

        a {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4285f4;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
    <div class="section">
        <div class="image-container">
            <img src="your-image-url.jpg" alt="Image">
        <div class="content">
            <h2>Welcome to Our Website</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum turpis eget orci euismod, a gravida purus varius. Integer bibendum turpis vel nisi dictum, vitae dapibus leo semper.</p>
            <a href="#learn-more">Learn More</a>

Replace “your-image-url.jpg” with the actual URL or file path of your image. This code combines the HTML structure and CSS styles into a single file for simplicity. Adjust the content and styles as needed for your specific design.

this is the idea


see the chair?

this is the idea


i am trying to place the chair image where you see it there

my send me a codepen?

most appreciated!

many thanks :slight_smile:

Remove flex direction from panel selector and see the margin property need value. @Pavel_NA

change the “.panel” to have a display of block not flex, that let me know if it works
happy coding.


it works!


plaese see



how do i make my chair image responsive?

to have it shrink and grow as the viewport shrinks and grows?