View Full Version : Left and right aligned text on same line

Hans Gans
02-22-2005, 06:05 PM
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>

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

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


02-22-2005, 06:54 PM
gosh, this is tough!!

Dan :confused:

02-22-2005, 08:40 PM
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>

Hans Gans
02-22-2005, 08:58 PM
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.