Wrapping <p> around an image

please see

https://codepen.io/Pavel_NA/pen/RwdZGGG

and

https://forallthetime.com/BI/index.html

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?

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image and Content Section</title>
    <style>
        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;
        }
    </style>
</head>
<body>
    <div class="section">
        <div class="image-container">
            <img src="your-image-url.jpg" alt="Image">
        </div>
        <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>
        </div>
    </div>
</body>
</html>


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

http://buckislandouterbanks.com/

see the chair?

this is the idea

http://buckislandouterbanks.com/

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.

BINGO!!!

it works!

thanks!

plaese see

https://forallthetime.com/CHAIR/index.html

https://codepen.io/Pavel_NA/pen/wvOregv

how do i make my chair image responsive?

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

thanks!