Height 100% on SPAN with multiple column

Question

I have the code below with 3 columns. I want to have the border of each column and each column also has its own color. I tried many previous examples of multiple column css problem and they don't work. For example, I don't want to use dirty trick of background image to render background color and border because the website allows changing color. Also I cannot use the method using thick border as color and then use negative margin with relative positioning. That method does not allow border. Below is the code. What is the best way? Thanks

<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
 <span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
 <span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
 <span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>

Answer 1

Why just add all span height: 100%; and top div height: auto;?

BTW, I am pretty sure that span with display:block; is div .

BTW2: Table tag isn't banned - when u need table with "table data" (like e.g. schedule) you should use it. ;) Don't if you build layout of all website...

Answer 2

<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>

the only prob is that container have to have set height.

Answer 3

Like MaRiz said, you should use a table in this case and set the CSS property: border-collapse: collapse;