Abstand behalten

[Kurt Eisermann]

Guten Tag,

ich habe ein Problem mit CSS. Zuerstmal möchte ich mein Problem erklären.
Untereiander habe ich 2 div's geschrieben:

<div>...</div>  
<div>...</div>

Zwischen beiden div's soll immer ein Abstand von 10px vorhanden sein.
Im ersten div kommen nochmal 3 div's mit jeweils der Höhe 211px vor. Manchmal kann es auch sein das eine der drei div's 225px hoch ist. Dann verschiebt sich die Box automatisch nach unten und der Abstand von 10px ist weg: Hier die Situation des HTML-Codes:

<div class="sub_cat_none">  
 <div class="box_1"></div>  
 <div class="box_2"></div>  
 <div class="box_2"></div>  
</div>  
<div class="sub_cat_upper">  
 <div class="box_1"></div>  
</div>
~~~der CSS-Code dazu:  
  
~~~css
.sub_cat_none {  
width : 654px;  
display : block;  
min-height : 211px;  
max-height : 225px;  
}  
.sub_cat_upper {  
width : 654px;  
margin : 10px 0px 0px 0px;  
min-height : 211px;  
max-height : 225px;  
}  
.box_1 {  
width : 196px;  
max-height : 225px;  
}  
.box_2 {  
float : left;  
margin : 0 0 0 33px;  
width : 196px;  
max-height : 225px;  
} 

Wie kann man den Abstand von 10px erfolgreich einstellen?