4 colonnes de mise en page CSS - Liquide

Je vais tourner en rond en essayant de le comprendre.

HTML/CSS:

<style type='text/css'>

#content {
    padding: 20px;
    background: #F3F6F7;
}

.inner-box {
    background: #fff;
}

.inner-box .col {
    background:#eee;
    display:block;
    float:left;
    margin:1%;
    padding:20px;
    width:23%;
}

</style>

<div id="content">      
    <div class="inner-box clearfix">
        <div class="col col-1">
            COl1
        </div>
        <div class="col col-2">
            COl2
        </div>
        <div class="col col-3">
            COl3
        </div>
        <div class="col col-4">
          COl4
        </div>

    </div>              
</div>    

En gros, je veux un fluide 4 colonnes de mise en page avec un peu de rembourrage autour de chaque colonne et le tout pour durée de 100% à travers l'écran.

Le code ci-dessus fonctionne, mais dès que je l'échelle du navigateur de la 4ème colonne sur la droite pour passer sous le reste.

OriginalL'auteur Carpy | 2010-11-25