CSS float：left和溢出：可见的截断文本

Question

I'm currently trying to make a color gradient in javascript with numerical values in some of the divs to represent as the scale. However, I've noticed with larger values, the numbers get cut off due to the float:left. I've also tried used display:inline-block, but it seems that has weird positioning and leaves gaps between them. I need the divs flush together, but just have the text overflow ontop of the following div. Is there a way to do this?

Both examples I mentioned are here:

http://jsfiddle.net/y3LTZ/3/

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>

and

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>

Thanks!

Answer 1

DEMO

using inline-block

HTML

<div class="wrapper">
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
</div>

CSS

.wrapper{
    width: 600px; 
    height: 30px;
    white-space: nowrap;
    font-size:0;
}
.single-block{
   width:20px;
   height:100%;
   display:inline-block;
   vertical-align:bottom;
    font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green{
    background-color:green;
}

Answer 2

If you want the text overlap the following div, you have to give them position:absolute;

<div style="position: relative; overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
    <div class="column" style="background-color:green;"></div>
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
    <div class="column" style="background-color:green;"></div>
    <div class="column" style="background-color:red;">
        <div class="textontop">texts</div>
    </div>
</div>

Css:

.column {
    width:20px;
    height:100%;
    overflow: visible;
    float:left;
    z-index:0;
}

.textontop {
    position:absolute;
    z-index:999;
}

Jsfiddle: http://jsfiddle.net/y3LTZ/5/