Question

I have a tricky CSS situation here.
Basically I have nested span tags that looks like this:

<span>A
  <span>test</span>
</span>
<span>B</span>
<span>C</span>

I need “test” to be below “A” with all three letters (A, B, C) being equal width.

The ideal result would look like this:

ABC
test

What I’m getting now is this:

A   BC
test

Is this possible? I played with float property, but it didn’t work because there could be other text before the letter in question:

SOME OTHER TEXT. ABC
                 test

I set up a fiddle here (http://jsfiddle.net/grnbeagle/g3hG8/), and the goal is to reduce the width of highlighted “A”. So far I have position:relative and top/left adjustment.

Any suggestion is appreciated.

Answer 1

See this updated fiddle for a working example:

http://jsfiddle.net/g3hG8/4/

Setting the wrapping spans position: relative; and then the child spans position: absolute; achieves the effect you desire.