Mam 4 div, które są ustawione na float w lewo, ale div div zawija dwie nowe linie na mniejszym ekranie, który jest dla mnie bardzo denerwujący ... Chcę, żeby skalowały się wraz z rozmiarem ekranu, tak aby zawsze pozostawały na tej samej linii, niezależnie od wielkości ekranu ... i staram się nie używać stolika (co jest bardzo kuszące, dając mu v.reliable !!!)

Zastanawiam się, jak rozwiązać ten irytujący problem, aby zawsze pozostawali na miejscu niezależnie od rozmiaru ekranu?

Mam to jako mój 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;
}

Mój 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>

Proszę o pomoc: D