Problem aligning text to an image 1

[TobyA]

Hi,

I want to vertical align a paragraph to the middle of an image, but I'm having issues:-

http://www.lothburyuk.com/dev/aboutus.asp

I've got the following CSS:-

img.mugshot {
float: left;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
}

#aboutus p {
clear: left;
}


When I float the image the vertical-align no longer works, but without the float only one line of text appears next to the image, the rest is shoved underneath....

This is a doddle using tables, but I'm determined not to return to the dark side.

Any suggestions would be appreciated!

Thanks,
Toby

 

[monksnake]

Maybe this isn't professional, but I think it is. Tina Copp looks like Elton John!!!

<.

 

[monksnake]

Do you need to vertical align ALL descriptions by all the images they are beside?

<.

 

[monksnake]

You can do an approximate centered look with the following, (it won't be exactly centered, but it will have a centered feel and look clean):


Here's an example of one person:

         <div>
         <img alt="David Howard" class="mugshot" src="tina-copp.jpg" />
         <p><b>Michael Boult</b><br>Michael has been involved in the Lloyd's and Companies markets for thirty years, specialising in Professional 
         Indemnity covers, dealing directly with clients and various insurance intermediaries through his previous employment 
         with long established Lloyd's brokers. He has particular expertise in the needs of the accountancy profession for 
         solutions in this field.</p>
         </div>

Here's the corresponding CSS:

<style type="text/css">
img.mugshot {
  float:left;
  margin-right: 10px;
}

#aboutus p {
   padding-top:70px;
}

#aboutus div {
   clear:left;
   height:200px;
   margin-bottom: 10px;
}   
</style>

<.

 

[TobyA]

Thanks for your replies monkshake.

I don't think that's at all unprofessional. In fact she does look rather like Elton John. She's quite a frightening woman.

The client has now decided they like the text aligned at the top of the images as it is.

However, I've noticed that there are breaks in the margin in IE6 & 7. Looks alright in FF.

Any ideas?

Ta muchly.

 

[TobyA]

UPDATE:

I've just implemented your suggestion and it's fixed my problem.

Ta muchly!

 

[monksnake]

Glad I could help!

<.

 

[bam720]

Congrats on TipMaster of the week monksnake

 

[monksnake]

Thank you bam.

<.