Q:

CSS fluid layout and dropping divs

I am struggling with a fluid css that drops divs as the browser window shrinks.
Here is a jsfiddle of the code
http://jsfiddle.net/maf1984/1r4v8fcf/
   *{
     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);
}

Based on the jsfiddle, I am trying to keep boxes 1, 2, 3, and 4 just below the top section all together (not dropping into main), and boxes 5, 6, 7, and 8 together as they are as well, next to the main block (not dropping below main).
I have searched long for a solution, many tutorials and layout generators. How can I keep the numbered boxes from dropping as the browser shrinks?

A:

You are going to need to do some math :) 
You are currently setting 20% of the total width, however you need to set 20% of the width minus the 200px margin. like this:
width : calc((100% - 200px) / 4);
See fiddle http://jsfiddle.net/1r4v8fcf/1/ I only updated the first 4 div's but you can add the rest :)

