Left and right aligned text on same line

Simple problem, easy solution?

I want a horizontal (navigation) bar with some text aligned left and some right, centered vertically. The following table code does that easily:

<table style="width: 100%; height: 10%; background: #CCC"><tr>
<td style="text-align: left">left</td>
<td style="text-align: right">right</td>
</tr></table>

How do I do that with CSS?

I tried several approaches:

Floating div's, aligned left and right. Ugly breaks if I shrink the window. Problem getting both div's to have the same height with different size fonts. If I specify a height, the vertical middle alignment is gone.
div for left part, absolutely positioned span for right part. Problems with vertically middle alignment.
Two span's with "text-align: left" and right. Right alignment is ignored.


The hard part is to get both the height of the bar and the middle vertical alignment right. As soon as I specify a height, the vertical alignment is gone:

<div style="background: #CCC; height: 30px">
hello charlie
</div>

adding a "vertical-alignment: middle" is ignored both in FF and IE. Any suggestions?

Regards,
Hans

gosh, this is tough!!

Dan :confused:

maybe something like this?
<div style="background: #CCC; height: 30px">
<div id="left" style="float:left;padding-top:6px;font-size:14px;">hello</div><div id="right" style="float:right;padding-top:6px;font-size:14px;">charlie</div>
</div>

Thank you for your suggestion!

I should have been more specific: of course a pixel definition layout would work, but that is something I try to avoid, if possible. Fonts must remain scalable.

Regards,
Hans