Is it possible to use CSS to align these divs/spans in a table-like manner? (While still retaining continuity)

I have

<div class='line'> 
  <div class='chord_line'> 
    <span class='chord_block'></span> 
    <span class='chord_block'>E</span> 
    <span class='chord_block'>B</spa开发者_JAVA技巧n> 
    <span class='chord_block'>C#m</span> 
    <span class='chord_block'>A</span> 
  </div> 
  <div class='lyric_line'> 
    <span class='lyric_block'></span> 
    <span class='lyric_block'>Just a</span> 
    <span class='lyric_block'>small-town girl</span> 
    <span class='lyric_block'>living in a</span> 
    <span class='lyric_block'>lonely world</span> 
  </div> 
</div>

(Excuse me for not being too familiar with proper css conventions for when to use div/spans)

I want to be able to display them so that each chord_block span and lyric_block span is aligned vertically, as if they were left-aligned and on the same row of a table. For example:

  E      B               C#m         A
  Just a small-town girl living in a lonely world

(There will often be cases where an empty chord block is matched up to non-empty lyric block, and vice-versa.)

I'm completely new to using CSS to align things, and have had no real understanding/experience of CSS aside from changing background colors and link styles. Is this possible in CSS? If not, how could the div/class nesting structure be revised to make this possible? I could change the spans to divs if necessary.

Some things I cannot use:

• I can't change the structure to group things by a chord_and_lyric_block div (and have their width stretch to the length of the lyric, and stack them horizontally), because I couldn't really copy/select the lyrical lines continuously in their entirety, which is extremely critical.
• I'm trying to avoid a table-like solution, because this data is not tabular at all. The chord line and the lyric line are meant to be read as one continuous line, not a set of cells. Also, apart from the design philosophy reasons, I think it might have the same problems as the previous thing bullet point.

If this is possible, what div/span attributes should I be using? Can you provide sample css?

If this is not possible, can it be done with javascript?

EDIT: I'm sorry I wasn't clear at the start, but I would like a solution that allows both the chord line and the lyric line to be "selectable" and continuous.

Original Attempt... ---> CSS Tables Demonstration

div.line {
     display:table;   
}

div.line > div {
     display:table-row;   
}

div.line > div span {
     display:table-cell;
     vertical-align:middle;   
}

For empty blocks, place html entity for non-breaking space as their contents. This should do what you want, if not, then I may have misunderstood.

SPECIAL NOTE: Compatibility for display:table-* is limited. More information

NEW EXAMPLE: Quite sure this is what you are looking for. ---> Demonstration

CSS

.block {
    margin-top:1.5em;
    position:relative;
    display:inline-block;
}

.block .chord {
    font-weight:bold;
    font-size:0.8em;
    position:absolute;
    top:-1em;
}

HTML

<div class="block">
    <div class="chord"></div>
    <div class="lyric"></div>
</div>

<div class="block">
    <div class="chord">E</div>
    <div class="lyric">Just a</div>
</div>

<div class="block">
    <div class="chord">B</div>
    <div class="lyric">small-town girl</div>
</div>

<div class="block">
    <div class="chord">C#m</div>
    <div class="lyric">living in a</div>
</div>

<div class="block">
    <div class="chord">A</div>
    <div class="lyric">lonely world</div>
</div>

It looks interesting to me so I just searched over it and find following article that is discussing similar problem:

Create a table using CSS

I checked it here:

http://jsfiddle.net/MdzDp/

I think you need to use DIVs and SPANs instead of ULs and LIs here.

A similar question was asked once, and the only workable solution was indeed a combined "chords and lyrics" block (with the chords having a combination of position: absolute and position: relative). It's the only way I can think of if you want this to work reliably and in edge cases like different font sizes and so on.

JSFiddle example

Now this doesn't do exactly what you need: It doesn't allow continuous selection of lyrics. But I can think of two general directions to extend it.

A) Chords as background images: If the Chord symbols

C# E# Em Am 

could be background images instead of actual text, you could use my code example and give the chord_block class a background-image of whatever Chord is in question. The image would have to contain the Chord (e.g. Em) as text. The upside is that this keeps the "lyrics line" intact. The downside is that this is not accessible, not resizable, and possibly problematic in print because many browsers don't show background images when printing.

B) Using jQuery: Using the approach shown in the JSFiddle, you have elements of the class chord_block that are already in the correct position. It should be half-way easy to use jQuery to create a new element on the fly, and add it to the document at the x/y position of each chord_block but outside the line, so you can still select the whole lyrics line without interference.

here's a crappy way to do it... i'd try more, but christmas dinner is served :)

<head>
<style type="text/css">

div.line {width:100%;}
div.line div.chord_line div.chord_block, div.line div.lyric_line div.lyric_block {width:20%; float:left;}
div.lyric_line {clear:left;}

</style>
</head>
<body>
<div class='line'> 
  <div class='chord_line'> 
    <div class='chord_block'>...</div> 
    <div class='chord_block'>E</div> 
    <div class='chord_block'>B</div> 
    <div class='chord_block'>C#m</div> 
    <div class='chord_block'>A</div> 
  </div> 
  <div class='lyric_line'> 
    <div class='lyric_block'>...</div> 
    <div class='lyric_block'>Just a</div> 
    <div class='lyric_block'>small-town girl</div> 
    <div class='lyric_block'>living in a</div> 
    <div class='lyric_block'>lonely world</div> 
  </div> 
</div>
</body>

EDIT:

if you're open to structural changes, here you go:

<head>
<style type="text/css">

#chord_block {float:left; padding:2px; text-align:left;}


</style>
</head>
<body>

<div id="chord_block"> 
    <div id="chord"></div>
    <div id="lyric"></div>
</div>

<div id="chord_block"> 
    <div id="chord">E</div>
    <div id="lyric">Just a</div>
</div>

<div id="chord_block"> 
    <div id="chord">B</div>
    <div id="lyric">small-town girl</div>
</div>

<div id="chord_block"> 
    <div id="chord">C#m</div>
    <div id="lyric">living in a</div>
</div>

<div id="chord_block"> 
    <div id="chord">A</div>
    <div id="lyric">lonely world</div>
</div>
</body>

let the down-voting begin ...

as much as I love css, sometimes tables are worth using.

let me clarify, if you can pull it off with css and div's, it's all good; but if you have to spend hours trying to figure the simplest (with tables) layout out -- I think you're wasting your (and your client's) time and money.