浮动导致空div消失 - 为什么？

Question

UPDATE: JSFiddle link here http://jsfiddle.net/truBB/

I'm using PHP to create a series of divs for data display:

function supp_data_div($state_id) {
    $data_value_array = get_supp_data(get_page_id(), $state_id); 

    $return_div = '<div id="supp_data'.$state_id.'" class="supp_data">';
    $is_percent = get_supp_data_type(get_page_id()); // returns '%' if true


    for($i=0; $i < sizeof($data_value_array); $i++) {
        $data_pair = $data_value_array[$i];
        $data_name = $data_pair[0];
        $data_value = $data_pair[1];
        if ($is_percent) 
            $bar_chart = '<div class="bar-chart" width="'.$data_value.'"></div>';
        $return_div = $return_div.'<div class="supp-data-item"><div class="supp-data-left">'.$data_name.'</div><div class="supp-data-right">'.$bar_chart.'<div class="data-item">'.$data_value.$is_percent.'</div>'.'</div></div>';
    }
    $return_div = $return_div.'</div>';

    return $return_div;

}

I'd like for my $data_value to show up directly after my $bar_chart like this:

|||||||||||| $data_value

With my current CSS .bar-chart shows up above my .data-item class. If I add float:left to .bar-chart, .bar-chart disappears completely.

CSS:

.supp_data {
    position: absolute;
    top:  18px;
    right: 8px;
    width:  250px;
    height: 250px;
    z-index: 9999;
    background-color: white;

    display: none;

    padding:  10px 10px 10px 10px;


    border: 3px solid #888;
    -moz-box-shadow: 0 0 10px #4e4747;
    -webkit-box-shadow: 0 0 10px #4e4747;
    box-shadow: 0 0 10px #4e4747;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

.supp-data-item {
    display: block;
    clear: both;
}

.supp-data-left {
    text-align: right;
    float: left;
    width: 120px;
    padding-bottom: 5px;
    padding-right: 5px;
    border-right: 1px solid #999;
}

.supp-data-right {
    float: left;
    font-weight: bold;
    margin-left: 4px;
    padding-left: 8px;
    padding-bottom: 5px;
    padding-right: 5px;
    margin-top: 0 auto;
    margin-bottom: 0 auto;
    vertical-align: middle;
    display: table-cell;

}

.bar-chart {
    height: 14px;
    background-color: $dark-grey;

}

.data-item {
    float: left;
}  

Answer 1

Okay, I copied your CSS into the Fiddle and removed display:none; from .supp_data. I then added float:left; to .bar-chart and fixed the background-color: $dark-grey property and everything seems to be behaving normally.

You can see it here: jsfiddle.net/truBB/3