3 divs mit float und alles mittig

[dacrow]

hey leute!
hab ein problem bei der ausrichtung von divs. dabei möchte ich, dass drei divs nebeneinander platziert werden, wenn genug platz ist. wenn der anzeigebereich zu klein ist, dann soll gefloatet werden, so dass zunächst nur noch zwei nebeneinander passen und im schlimmsten fall alle drei übereinander stehen.
das ganze soll dann jedoch mittig in einem umgebenden div ausgerichtet sein:

________________________________
|    _____    _____    _____   |
|   |    |   |    |   |    |   |
|   |    |   |    |   |    |   |
|   |____|   |____|   |____|   |
|______________________________|

bisher hab ich folgenden code:

...

<div style="margin: 0 auto;" >  
 <div style="float: left; margin: 0 10px; width: 220px;" >  
  <div style="margin-top: 20px;">  
   <img src="p.jpg" width="200" height="200" />  
  </div>  
  <div style="margin-top: 20px;" >  
   <img src="p.jpg" width="200" height="200" />  
  </div>  
 </div>  
 <div style="float: left; margin: 20px 20px; width: 220px;">  
   TEXTEXTEXT  
 </div>  
 <div style="float: left; margin: 0 10px; width: 220px;">  
  <div style="margin-top: 20px;">  
   <img src="p.jpg" width="200" height="200" />  
  </div>  
  <div style="margin-top: 20px;">  
   <img src="bilder/p.jpg" width="200" height="200" />  
  </div>  
 </div>		  
 <div style="clear: left"></div>  
</div>

...

problem ist: das äußerste div hat immer die volle breite des monitors und wird deshalb nicht mittig angezeigt. wenn ich eine width: 720px; vergebe, dann geht es. aber: wenn der anzeigenbereich zu klein wird, dann floaten die inneren elemente nicht mehr...

ich möchte also, dass die inneren divs floaten und dabei mittig angezeigt werden.. gibts dafür eine lösung?

thx