Lösung, ABER BOX soll sich nicht weiter ALS zusammenschieben

[Norman]

So das Probelme habe ich mit

margin:0 0 0 100px;

gelöst.

Jetzt schiebt sich die rechte (middle) nicht mehr unter die linke Box,
Aber leider, wenn man das Fenster verkleinert,

.box{
margin:0 2% 20px 0;
padding:0 0 10px 0;
border-right: #787878 1px dotted;
border-bottom: #787878 1px dotted;
width:47%;
float:left;
overflow: hidden;                  <----------- (siehe unten)
}

.box .left{
width:100px;
float:left;
}

.box .middle{
width:10px;
margin:0 0 0 100px;           <----------- NEU
}

overflow: hidden; : Verhindert das der Inhalt nicht aus der Box ragt, doch bei zusammenschieben verschwiendet der Inhalt. Es soll aber verhindert werden das die Box sich ab einer gewissen Grösse nicht mehr zusammenschieben lässt.