Your help please, want to vertically align text and a pic beside the text.

Hi!

As you can see in my most wonderful illustration of my desired result at the end. I want to
vertically align a piece of text and a photo beside it. Now here you can see how it goes really. http://koti.mbnet.fi/thinner/ytn2/hallitus.html

I dunno how to achieve my needs, thought you could help me.

here´s the html:

<div id="content">

<h5 class="content">PUHEENJOHTAJA:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">VARAPUHEENJOHTAJA:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>

Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">SIHTEERI:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">MARKKINOINTISIHTEERI:</h5>

<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">TALOUSIHTEERI:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>

Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">JÄSEN:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">JÄSEN:</h5>
<p>

<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">JÄSEN:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com

</p>

<h5 class="content">JÄSEN:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">
Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

<h5 class="content">JÄSEN:</h5>
<p>
<img src="kuvat/pic.jpg" align="right" alt="Henry Kiviaho">

Henry Kiviaho<br/>
Gsm: 050 4020725<br/>
Email: henry.kiviaho@gmail.com
</p>

</div>

HTML:

and here´s the css:

#content {

	background: #F8F8FA;

	border-left: 1px dashed #000;

	position: relative;

	right: 5px;

	width: 530px;

	margin-top: 5px;

	float: right;

	

	}

	

#content p {

		margin: 0;

		font: normal 0.7em Verdana;

		color: #000;

		padding: 7px;

		line-height: 15px;

		}

		

.content  {

	color: #E03A14;

	margin: 0;

	text-align: left;

	padding-left: 7px;

	padding-top: 5px;

	}

Code (markup):

As you can see i´ve tried to put the image also inside the paragraph tags. I don´t know if it is the right way. Or shoul i make a separate div for the whole
text and pic?

Thanks in advance!

 

You could put it in a table:

<table cellpadding="10" cellspacing="0" border="0" align="center">
<tr>
<td>Here's all my text.   Just look at all this text!</td>
</tr>
<td>
<img src="imageFile.jpg" border="0" alt="This is my image" />
</td>
</tr>
</table>

Code (markup):

 

You could place the content in a div and float the image to the right of the text ie.

#box {
          width:400px;
        }

.float-right {
                clear:both;
                float:right;
                }

Code (markup):

HTML

<div id="box">
<p>blar blar blar <img src="image.jpg" class="float-right"></p>
</div>

Code (markup):