Un genre de clear:bottom

[Titum]

Bonjour,
Dans ma page j'ai un div en float:right et le corps de la page contient du texte et 2 float:left :

Code :

1
2
3
4
5
6
 
<h1>mon titre</h1>
<div id="1" style="float:right">mon petit float à droite</div>
blablabla du texte
<div div="2" style="float:left">pour faire une première colonne</div>
<div div="3" style="float:left">pour faire une deuxième colonne</div>

Si la largeur de la page est suffisante, les 3 div sont alignés comme il faut.
Si la largeur diminue, le div #3 se décale : il reste entre les 2 autres mais passe en-dessous du #1. C'est ça mon problème !
Si elle diminue encore, le #3 passe en dessous du #2 et ça me va.
C'est les 3 positions sur l'image ci-dessous :

Donc, pour éviter que le #2 fasse une transition sous le #1 et passe plutôt directement sous le #3 il faudrait que je mette un div qui prenne toute la hauteur sous #1 (zone hachurée)
J'ai tenté de mettre un div dans le #1 avec un height:100% mais il ne s'étale pas du tout jusqu'en bas.
J'aimerai éviter de faire un tableau.
S'il y une solution en CSS pour dire qu'on ne veut rien en dessous, ou une autre propriété que height:100% qui ne marche pas, je suis preneur.
Merci