Help with css, please

Hi all..

I am having a hard time getting my css to do what I want...

In essence I want one image on the very left of the div, another on the 
right (the images are the same size, and the phone number centered in 
the middle.

This is an example of doing it with tables, but I'd like to achieve this 
in css...

Can anyone point me in the right direction, please.


TIA



<div id="header">
<table style="width:100%;">
<tr>
<td style="width:33%; text-align:left;"><p><img src="images/Logo1.jpg" 
style="width:300px; height:100px; border:0;" alt="My cor****ate 
logo"></p></td>
<td style="width:34%; text-align:center;vertical-align:middle;"><p>Call 
xxxx xxx xxx</p></td>
<td style="width:33%; text-align:right;"><p><img class="link" 
src="images/Logo2.jpg" style="width:300px; height:100px; border:0;" 
alt="Our other logo"></p></td>
</tr>
</table>
</div><!-- end of header -->


BTW: the header css is:

#header
{
	width: 80%;
	margin:auto;
	background-color: white;
	border: thin solid red;
	padding:0;
	height: 110px;
}