Forums

cyneWATCH

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:

<img style="float: left;" src="images/test.jpg" width="100" height="100" alt="Test B1">
<p>Paragraph goes here</p>

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.

cyneWATCH

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 class="float_left"  src="images/test.jpg" width="100" height="100" alt="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*/
}

chrisburton

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

<img src="#" title="" alt="">
<h2><a href="#">Pocahontas is a Man</a></h2>

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

cyneWATCH

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.

treehouse : what would you like to learn today?

Forums

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