DIV - ovi problem. Jel moze ovo da se resi

Evo jednostavnog primera u codu i na slici:

<div style='background:red; float:left;'>
<?php 
for($i==1; $i<8; $i++)
{
echo "<div style='background:blue;width:220px;height:200px;float:left;margin:1px;'>$i</div>";
}
?>
</div>

Znaci kad umesto 8 stoji 4 spoljasnji DIV prati i lepi se uz poslednji unutrasnji DIV, a kad prelazi u drugi red, ne prati, ostaje crveno polje desno vidljivo.
Hteo bih da spoljasnji div prati boxove i da se ne siri ma koliko redova bilo. Kao sto vidite, DIV spoljasnji nema definisanu sirinu.

Koristi % , width: 25%;, ako hoćeš da ti se poklapa kako treba. Btw spoljašnji div se smatra 100% ako nije definisan drugačije. Tako da 4x25=100, sad ne znam dal’ ćete ova margina šta zafrkavati, vjerovatno ćeš morati podesiti width malo ispod 25% ako bude.

Nije fazon u tome, da dolim procente, vec da se velicina spoljneg diva prilagodi broju boxova u jednom redu, kad ima vise od jednog reda.
Cudi me da kad je jedan red, sirina spoljneg diva se prilagodjava sirini i broju boxova u jednom redu i spoljni box ne zauzima 100% sirrine prostora koji ima od njega desno, dok kad se napravi jos jedan red iz razloga sto i 5. box ne moze da stane u prvi redi, onda sirina spoljneg diva ne prati sirinu boxova u redovima.