Scrooll (overflow: auto) no me funciona correctamente

[danideu]

Hola a todos los foreros,

Quiero hacer una especie de datagrid pero solo con CSS. He creado el siguiente código HTML para crear la "tabla" (solo la cabecera y una fila) pero con Divs:

CODIGO

Código HTML:

<div id="datagrid">
            <ul class="cabecera">
                <li style="width:20px">ID</li>
                <li style="width:200px">Proveedor</li>
                <li style="width:150px">Dirección</li>
                <li style="width:80px">Teléfono</li>
                <li style="width:80px">Fax</li>
                <li style="width:80px">E-mail</li>
                <li style="width:80px">Importe</li>
                <li style="width:150px">Solicitante</li>
                <li style="width:40px">Estado</li>
                <li style="width:60px">Acción</li>
            </ul>
            <br />
            <div class="clear"></div>
            <ul class="info">
                <li style="width:20px">ID</li>
                <li style="width:200px">Proveedor</li>
                <li style="width:150px">Dirección</li>
                <li style="width:80px">Teléfono</li>
                <li style="width:80px">Fax</li>
                <li style="width:80px">E-mail</li>
                <li style="width:80px">Importe</li>
                <li style="width:150px">Solicitante</li>
                <li style="width:40px;background-color: #6BCAE4; color:#000000">Activo</li>
                <li style="width:60px">
                    <a href="#"><img src="images/iconos/building_edit.png" alt="Modificar"></a>
                    <a href="#"><img src="images/iconos/cancel.png" alt="No autorizar"></a>
                    <a href="#"><img src="images/iconos/accept.png" alt="Autorizar"></a>
                </li>
            </ul>
</div>
 

Y mi código CSS es el siguiente, teniendo en cuenta que el tamaño que le he puesto al cuerpo de la web es de width: 900px:

Código CSS:

#datagrid{
    overflow: auto;
    width: 900px;
}
#datagrid ul{
    display: block; 
}
#datagrid ul li{
    display: inline;
    opacity: 0.6;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    color: #33617F; 
    float: left; 
    padding: 6px 14px 6px 14px; 
    margin: 0 0 0 2px; 
    text-align: left;    
}
.cabecera li{
    background: #C6E5F9 url(../images/bullet.gif) no-repeat 7px 12px; 
    font-size: .9em; 
    font-weight: bold;    
}
.info li{
        text-align: left;
    border-bottom: 1px solid #C6E5F9;
    margin: 0px;
}
 

PROBLEMA

El problema es que me descuadra todo .. es decir, si le pongo un overflow: auto, deberia mostrarme un scroll en caso de pasarse el ancho, pero lo que me hace es que me pone lo que sobra debajo, con lo que queda descuadrado el datagrid. Podéis ver una imagen de como ha quedado aquí:





Espero vuestra valioso conocimiento.


Saludos.