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

[Billy]

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).

[Paulie_D]

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

See here

[kMist]

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

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.

[Billy]

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

[kMist]

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

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*/

}

[chrisburton]

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.

[Billy]

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.

[chrisburton]

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

[Author]

Posts