Problème de float... problème sérieux ?

Bonjour à tous,

Dans une structure de site à 3 colonnes (par div et sans frames) j'ai ceci :

exemple.jpg

Je souhaites aligner à droite une image ( le bloc blanc ) dans un bloc déterminé. J'utilise pour cela l'attribut float.
Seulement le float fait passer l'image sur les divisions suivantes.

J'ai lu l'article d'openWeb qui indique une solution via une div ou un hr auquel on applique un clear:both. Mon soucis c'est que compte tenu de ma structure à 3 colonnes, le clear me fait passer toutes les div se trouvant sous le conteneur de l'image en bas de page (sous les colonnes gauche et droite).

Je n'arrive pas à trouver de solution simple. Quelqu'un peut-il me donner une indication, ou une solution ?

Merci.
Modifié par vinzo (10 Mar 2005 - 16:36)

Il ya bien le display: table; pour Firefox/Mozilla mais cela ne fonctionne pas sous IE.

Et le fameux :

.clearfix:after { content: "."; display: block; height: 0pt; clear: both; visibility: hidden; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Ne fonctionne pas dans mon cas, sous Firefox et opera.

Ou alors il faudrait faire une detection navigateurs et avoir deux styles :

.clearfixIE:after { content: "."; display: block; height: 0pt; clear: both; visibility: hidden; }
* html .clearfixIE { height: 1%; }
.clearfixIE { display: block; }
.clearfix { display: table; }

Mais je n'aime pas ce genre de trucs.