lol ok my code is:

div.tutthumb {
width:420px;
border: 1px solid #000;
padding: 2px;
}

.tutthumb img {
border:none;
float: left;
margin: 2px 4px 2px 2px;
}

.step {
text-align: center;
background-color: #EFEFEF;
width: 418px;
font-weight: bold;
margin: 5px 0px 1px 0px;
padding: 2px;
}

<div class="tutthumb">
<div class="step">Step One</div>
<img src="tutorial_images/tutorial_ps_shock01.gif" width="200" height="200" />
<br /> <br />
OK, first of all we make a new canvas, mine is 400x400 pixels, with a black background.
Now using the type (text) tool, write something across the middle of the canvas, I have written 'hello' as seen to the left.
</div>

(for example)

I want the image to be aligned to the left of the div, but when the image is floated to the left, it seems to break out of the div, and when it ISNT, then the text appears underneath the image - an y ideas?

this is kinda the setup im after (ignoring the dots):

|----------------------|
|........|.....................|
|..img..|...text here......|
|........|......................|
|_____|______________|