Html CSS流体布局和放置div

当浏览器窗口缩小时，我正在努力使用一个流畅的css来删除div

下面是一段代码

基于jsfiddle，我试图将框1、2、3和4放在顶部下方（不放在main中），框5、6、7和8也放在一起，靠近主块（不放在main下）

---

我一直在寻找解决方案、许多教程和布局生成器。当浏览器缩小时，如何防止编号框掉落？

您需要做一些计算：）

当前设置的是总宽度的20%，但是需要设置宽度的20%减去200px的边距。像这样：

宽度：计算（（100%-200px）/4）

See fiddle I只更新了前4个div，但您可以添加其余部分：）
我强烈建议您查看并停止推荐Boostrap！那太懒了！了解他的div下降的原因更重要。谢谢。对于其余的div，我做了以下操作，包括“main”框的宽度和边距宽度，效果非常好<代码>宽度：计算（（100%-600px）/2）

对于div“mainbottomblock”，大的主正方形比将边距设置为侧边栏的宽度以便将其放置在侧边栏旁边有更好的实践。我将mainbottomblock宽度更改为

width:calc（100%-600px）

   *{
     padding : 0;
     margin : 0;
     border : 0;
}
.blended_grid{
     display : block;
     width: 100%;
     min-width: 400px;
     max-width: 1000px;
     overflow : auto;
     margin : auto;
}

.header{
     float : left;
     width: 100%;
     height : 100px;
     background-color : rgba(137,255,132,0.4);
}

#contentliquid {
    float: left;
    width: 100%;
}
.maintopblock{ 
     float : left;
     margin-left: 200px;
     width : 80%;
     height : 200px;
     background-color : rgba(33,28,255,0.4);
}
.cube1{
     float : left;
     margin-left: 200px;
     width : 20%;
     height : 200px;
     background-color : rgba(255,123,161,0.4);
}
.cube2{ 
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(255,158,132,0.4);
}
.cube3{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(254,255,147,0.4);
}
.cube4{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(189,255,155,0.4);
}
.mainbottomblock{
     float : left;
     width : 40%;
     height : 400px;
     margin-left: 200px;
     background-color : rgba(33,28,255,0.4);
}
.cube5{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(132,197,255,0.4);
}
.cube6{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(111,108,255,0.4);
}
.cube7{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(0,139,255,0.4);
}
.cube8{
     float : left;
     width : 20%;
     height : 200px;
     background-color : rgba(147,0,255,0.4);
}
.sidebar{
     float : left;
     width : 200px;
     height : 800px;
     margin-left: -100%;
     background-color : rgba(249,255,4,0.4);
}
.footer{
     float : left;
     width: 100%;
     height : 100px;
     background-color : rgba(133,255,123,0.4);
}