Grow your CSS skills. Land your dream job.

How to wrap text around an image (that can be placed left or right) with CSS?

  • # July 16, 2011 at 6:14 am

    When writing articles for my website, I find that it’s much nicer to have pictures that go with the text, to break it up. But I’ve always used tables, seeing as I’ve only recently learned CSS from this website.

    The only way that I’ve managed to place an image on one side of the text with the text wrapping around it (rectangular image) is using absolute positioning and left-margins. I can’t get my image to align to the right either.

    So could anyone please post a way to both align the picture on one side or another (with CSS) and by placing it within the text (without absolute positioning and text above, beneath and to one side).

    # July 16, 2011 at 8:18 am

    Depends on your level of knowledge of HTML/CSS but basically the answer is to ‘float’ the ‘image’ using css.

    See here

    # July 16, 2011 at 9:29 am

    If you have an image that you want shown to the left you would have:

    Test B1

    Paragraph goes here

    This would make the image to to the left side of whatever container you have it in (div) and the text would wrap around it.

    Now once you progress in your knowledge of css you will come to avoiding putting inline styling in your code and you will use css for these things but search for info on “float” and you will find a ton of info out there for you to digest.

    # July 16, 2011 at 9:41 am

    Thanks. Whenever I’d used float, I’d made the text float as well, which must have been a mistake.

    # July 16, 2011 at 10:03 am

    If you use CSS you would likely mark it up like this:

    Test B1
    img.float_left {
    float: left;
    margin: 0 10px 10px 0; /*give it some space around the right and bottom of the image so the text does not touch*/
    }
    # July 16, 2011 at 10:20 am

    It would be helpful if you posted your HTML for this. Usually it’s something like..


    Pocahontas is a Man

    Are you using WordPress? Maybe we can make it easier with a little PHP.

    # July 16, 2011 at 11:33 am

    These examples are perfect, thanks (kMist mostly).

    @ChristopherBurton: No, I’m using Coda, and only use PHP for calling header, footer and sidebar, but I’d be interested in what you’ve got.

    # July 16, 2011 at 11:45 am

    When you said, “articles”, I automatically assumed this was for a blog which in most cases WordPress is used and things are pre-defined.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".