[Off piste] HTML / CSS

[DarkStar]

This HTML snippet generates a left-aligned image with the text alongside it:

PHP Code:

    <img src="../images/test1.png" align="left" vspace="10" hspace="10">

     <div>          <p>This is the text accompanying the image, repeated a few times to pad things out. 
This is the text accompanying the image, repeated a few times to pad things out. 
This is the text accompanying the image, repeated a few times to pad things out. 
This is the text accompanying the image, repeated a few times to pad things out. 
</p><p>
This is the text accompanying the image, repeated a few times to pad things out. 
This is the text accompanying the image, repeated a few times to pad things out.</p>
        </div> 


So far, so good.

I have a load of similar image+text sections so I would like to use a CSS class to define this layout. That way I can change them all at once. Can someone let me know how to do it? So far I have this in the CSS file:

.leftimg {MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; VERTICAL-ALIGN: top; BACKGROUND-COLOR: #F8A800;
}

but that does not put the text at the same level as the top of the image; although the background colour is in the correct place..

[cfillion]

https://jsfiddle.net/27pqh9Ls/

.leftimg {
  float: left;
  padding: 10px;
}

[DarkStar]

D'uh! Thank you. That was easy,

I had read about "float" but misinterpreted it (or misapplied it).