Tengo 4 divs que están configurados para flotar a la izquierda pero el div final sigue envolviendo dos líneas nuevas en una pantalla más pequeña, lo que me molesta mucho ... quiero que se amplíen con el tamaño de la pantalla para que siempre permanezcan en la misma línea independientemente del tamaño de la pantalla ... y estoy intentando no usar una mesa (lo cual es muy tentador, ya que son muy confiables para esto)

Me pregunto cómo solucionar este problema molesto para que siempre permanezcan en posición independientemente del tamaño de la pantalla.

Tengo esto como mi 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;
}

Mi 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 ayuda: D