Layout of text and images

[Crowds]

Hi
I have a three column layout and I'm wondering if there is ways of arranging my text around images within my centre (content) column. I realise I could insert a table within the centre <div> but I thought the whole idea of using CSS was to move away from layout cells and tables. There is a picture of the type of thing I'm trying to achieve here
If I try and input text within a <div> that also contains an image the text only ever appears at the bottom and I cannot arrange it so it appears at the side.
Thinking about solutions to this I would imagine that one way of doing this would be to place a new <div> within my centre <div> that could contain the image and in some way would align itself relative to the <div> that contains it.
Am I making any sense?
I fear not

[mark87]

That's certainly possible, you need to give the image a class like so -

<img src="blah.jpg" class="image">

Then in your CSS, float it to where you want - eg.

img.image {
float: right;
margin: 10px
}

[Crowds]

Thanks Mark87,
I'll give it a go now

[mark87]

No prob, so it should be like this with the image first -

<div>
<img class="image" src="blah.jpg">
<p>Your text goes here.</p>
</div>

[Crowds]

Cheers Mark87
Tried it and it worked just fine
how does giving the image a class change things
(he say's knowing full well that it might be time to start looking at
some of the many class tutorials he has seen around)
Crowds

[mark87]

Well you don't really need a class... but then all your images would be floating right ! - eg. if you used 'img { float: right }'.

You need the class to define it as it's own thing - you could call the class 'floatr' or something so that whenever you want an image floating right you use -

<img src="blah.jpg" class="floatr">

img.floatr { float: right }

[Crowds]

Cool, and so I just create one for the right float and maybe a couple more for centre and left. And as long as its within the centre <div> the floats and any margins I apply will be relative to the containing <div>, in this case my centre <div>

[mark87]

Correct. Although you can only float left and right - if you want a center image with text wrapping around it it's a bit harder -

http://alistapart.com/articles/crosscolumn/

[Crowds]

That's great, thanks for the link. I probably wont want to wrap text around a centred image though. Probably too distracting, maybe ok for an effect.
Cheers again
crowds
Edit-
Actualy from viewing some of the examples from the link, i can see that it would have its use's. Bookmarked for future use