div with absolutely positioned <span> overwrites next <div>

Question

I have a series of divs with two spans each. Second span is absolutely positioned for column alignment. Problem is that if the text in the second span is long enough to force a second line, that line overwrites the next div in the sequence.

You can see it at jsfiddle

Here's some code:

<code><div id='container'>
<div class='solodiv'><span class='cvyear' >2011</span><span class='cvtext'>
    <em>Item 1</em>Text that's long enough to force a second line which overwrites the next line</span></div>
<div class='solodiv'><span class='cvyear'>2010</span><span class='cvtext'>
    <em>Item 2</em> Item 2 text, shorter</span></div>
<div class='solodiv'><span class='cvyear'>2008 - 2009</span><span class='cvtext'>
    <em>Item 3</em> Item 3 text, one line only</span></div>

And the .css:

#container {
font-family:sans-serif;
position:absolute;
left:10px;
top:10px;
width:600px,
}
.cvtext {
position:absolute;
left:120px;
width:480px;
}  

I know there are many many topics similar to this, but I can't find the solution, other than to use tables. Do I have to?

Answer 1

I hope this isn't too hasty of an answer that I may be missing something, but it seems to me that you could set .cvyear and .cvtext to display: table-cell without using an actual table. This will treat your spans like table-cells.

Here's my fiddle .

And the CSS:

#container {
  font-family: sans-serif;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 600px,
}

.cvyear {
  display: table-cell;
  width: 120px;
}

.cvtext {
  display: table-cell;
  width: 480px;
}

Is this what you're looking for?

Answer 2

Change your CSS to the following:

#container {
font-family:sans-serif;
position:absolute;
left:10px;
top:10px;
width:600px;
}

.cvtext {
float: left;
width: 480px;
}

.cvyear {
float: left;
width: 120px;
}

Here is a modified Fiddle that demonstrates this working.