Eu tenho 4 divs que estão definidos para flutuar à esquerda, mas o fim div continua envolvendo dois uma nova linha em uma tela menor que é realmente me incomodando ... eu quero que eles escalar com o tamanho da tela para que eles permaneçam sempre na mesma linha, independentemente de tamanho de tela ... e estou tentando não usar uma tabela (o que é muito tentador dar-lhes v.confiável para isso!)

Eu estou querendo saber como corrigir esse problema chato para que eles sempre ficar em posição, independentemente do tamanho da tela?

Eu tenho isso como meu CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

Meu HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div> 



</div>

Por favor ajude: D