Getting text to wrap around an image is super common, and there are a few methods you can use to make it look neat! Since you’ve tried floating the image, that’s definitely one way to go. Here’s a basic example of how you can set it up:

        <style>
            .image-left {
                float: left;
                margin: 0 15px 15px 0; /* adds some space around the image */
                max-width: 50%; /* makes sure the image isn't too big */
            }
        </style>

        <img src="your-image.jpg" alt="Description of image" class="image-left">
        <p>Your text goes here. It should wrap nicely around the image on the left. You can add more text to see how it flows. It helps to adjust the margins if the text is too close to the image, which you've already done!</p>
    

Using margins is a good idea, as it creates space and makes your layout look cleaner. For your concern about layout on different screen sizes, you can definitely use media queries to adjust the image and text wrapping on mobile. Here’s a tiny example:

        <style>
            @media (max-width: 600px) {
                .image-left {
                    float: none; /* stack the image above the text */
                    display: block;
                    max-width: 100%;
                }
            }
        </style>
    

This way, on mobile, your image will sit on top of the text instead of beside it, which is often more visually appealing. Flexbox can be helpful too, especially if you want more control over alignment. But for simple text wrapping, floating is still a valid and effective option!

Remember, using classes for your elements is a good practice as it gives you clearer control over styles. Just play around with it, and you’ll figure out what works best for your design. Good luck!