CSS Alignment Trick?

[Prospero]

I'm using the following simple stylesheet rules:

h3 span.info {
 text-align: left;
 }
 
 h3 span.sig {
 text-align: right;
 }

Applied to the following simple block of xhtml"

<h3>
 <span class='info'>Baseline Content Info</span>
 <span class='sig'>Baseline Sig</span>
  </h3>

I'm trying to get both lines of text (Baseline Content Info, Baseline Sig) to appear on the same line in the h3 block, just at opposite ends of it. It seems like it should be simple, but I've been trying to play around with it to no avail - if at all possible, I'd like to try and avoid using additional div's and determining the positions absolutely, but I'm not sure if there is any other way to do it. Any help would be greatly appreciated, if someone has come across a similar problem and worked around it.

[all4nerds]

Hello

h3 span.info {
text-align: left;float:left;
}

h3 span.sig {
text-align: right;float:right;
}

h3 span{display:block;}

[Prospero]

That put the alignment exactly where it needed to be..but it removed all of the CSS formatting I had previously applied to the h3 block...do I just need to apply it individually to the span groupings then instead?

[Paul O'B]

Hi,

Spans are inline elements and therefore there is no left and right in them as they are just content width so text-align applied to them is nonsensical. You will need to use floats as all4nerds has shown or as this simple example .

http://www.pmob.co.uk/temp/leftandright.htm

[all4nerds]

That put the alignment exactly where it needed to be..but it removed all of the CSS formatting I had previously applied to the h3 block...do I just need to apply it individually to the span groupings then instead?

Hello

Sorry you can leave the display block out

h3 span.info {
text-align: left;float:left;
}

h3 span.sig {
text-align: right;float:right;
}

[Prospero]

Fantastic, thanks Paul, all4nerds - works perfectly, and I appreciate the quick aid.