为这个例子创建CSS最优雅的方法是什么？

Question

我正在尝试为此示例创建CSS：

我现在遇到的问题是row1，当浏览器调整大小时col3不会保持不变。

我不太关心配色方案，只是最有效的跨浏览器方式来创建CSS

我正在考虑使用表格，但是想先尝试使用CSS和DIV来实现这一点。

以下是我目前的样本：

JSFiddle

html{height:100%;}

body {
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    height:100%;
    /*background-color: #fff;*/
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#782be0, #451883); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#782be0, #451883); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#782be0, #451883); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#782be0, #451883); /* Standard syntax */
}

header, footer, nav, section {
    display: block;
}



/* Styles for columns
-----------------------------------------------------------*/
.col-1 { 
    width: 100px;
    height:100px;
    background: -o-linear-gradient(#f30c48, #850b2b); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(#f30c48, #850b2b); /* Standard syntax */
}
.col-2 {
    width: 100px;
    height:100px;
    background: -o-linear-gradient(#f30c48, #850b2b); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(#3e3e3e, #030303); /* Standard syntax */

}
.col-3 {  
    
    width: 150px;
    height:20px;
    background: -o-linear-gradient(#f30c48, #850b2b); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(#3e3e3e, #030303); /* Standard syntax */
    
}

.col-4 { 
    width: 100px;
    height:100px;
    background: -o-linear-gradient(#f30c48, #850b2b); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(#3e3e3e, #030303); /* Standard syntax */
}

.col-5 { 
   width: 100px;
    height:100px;
    background: -o-linear-gradient(#f30c48, #850b2b); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(#3e3e3e, #030303); /* Standard syntax */
}


[class*="col-"] {
    float: left;
    padding: 25px;
    margin-left:50px;
    margin-top:25px;
    
    
}


/* Styles for basic forms
-----------------------------------------------------------*/
div { 
    text-align:center; 
}




label{ 
    color:white;
    font-size:225px;
    height:100px;
    line-height:180px;
}


.labelOne{
    color:white;
    font-size:16px;
    height:12px;
    line-height:16px;
}

.labelTwo {
  color:white;
    font-size:16px;
    height:16px;
    line-height:16px;
    
    text-align:left;
    
}

.labelThree{
     color:white;
    font-size:16px;
    height:12px;
    line-height:16px;
}

.labelFour{
   
    color:white;
     font-size:16px;
    height:12px;
    line-height:16px;

}

.smallLabel{
    display:inline-block;
    vertical-align:middle;
    color:white;
    float:right;
    font-size:60px;
    height:12px;
    line-height:12px;
}

.smallLabelTwo{
    display:inline-block;
    color:white;
 font-size:36px;
    height:36px;
    line-height:36px;
}

<div>
    <div class="col-1">
        <label class="labelOne">CALLS WAITING</label>
        <p><label id="callsWaiting"></label></p>
    </div>

    <div class="col-2">
        <label class="labelOne">AVAILABLE</label>
        <p><label id="available"> </label>  </p>
    </div>

   
        <div class="col-3">
            <label class="labelTwo">LUNCH BREAKS</label>
            <label class="smallLabel" id="breaksLunch">0</label>
        </div>

        <div class="col-3">
            <label class="labelTwo">MEETING TRAINING</label>
            <label class="smallLabel" id="meetingTraining">0</label>
        </div>

        <div class="col-3">
            <label class="labelTwo">NOT AVAILABLE</label>
            <label class="smallLabel" id="notAvailable">0</label>
        </div>
    
</div>

<div style="clear:both;">
    
    <div class="col-4">
        <label class="labelThree">INBOUND</label>
        <p><label class="smallLabelTwo" id="inBound"></label></p>
    </div>

    <div class="col-5">
        <label class="labelFour">OUTBOUND</label>
        <p><label class="smallLabelTwo" id="outBound"></label></p>
    </div>

</div>