Problème dans ma mise en page

Bonjour,

Je fais appel à votre aide car je bute depuis un moment sur un problème de mise en page que je n'arrive pas à résoudre. C'est trop compliqué pour moi.

J'aimerais faire la mise en page en haut de cette image mais j'obtiens celle qui est en bas :
http://uppix.net/6/e/f/edc5ac46ec2dc9b7c794a0a960ca6.gif

Voici mon code CSS :

#bleu {
	width: 900px;
	height: auto;
	}
#rose {
	float: left;
	width: 600px;
	margin-top: 0px;
	margin-left: 20px;
	}
#vert {
	margin-left: 650px;
	margin-top: 0px;
	margin-right: 30px;
	}

...et voici le code HTML

<div id="bleu">
<div id="rose">
</div><!-- rose -->
<div id="vert">
</div><!-- vert -->
</div><!-- bleu -->

La zone bleue englobant les deux autres, je souhaiterais que sa hauteur s'ajuste sur la hauteur de la plus grande zone qu'elle contient (sur l'exemple, la rose).

Dans mon code, c'est comme si la zone bleue n'était pas reconnue comme englobant les deux autres, du coup, le contenu qui suit s'affiche au mauvais endroit lui aussi.

Si j'enlève le "float: left", ça règle mon problème. Par contre du coup c'est la zone verte qui n'est plus au bon endroit. Moi je veux que les zones rose et bleue soient au même niveau.

Un problème de positions relative/absolute ?

Merci beaucoup et merci d'avoir lu.

Bonjour,

Il s'agit d'un problème très courant pour les non-avertis =)
Le float dépasse de son conteneur car il n'est plus vraiment dans le flux... Pour cela, il existe plusieurs méthodes que tu pourras retrouver ici

http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

Merci beaucoup pour le coup de main. C'est sympa.

En effet, je suis un "non averti"

J'ai utilisé la méthode "clear" et ça a marché, la prochaine étape sera de comprendre pourquoi. C'est bien mystérieux ce petit ajout.

atoo a écrit :
ça a marché, la prochaine étape sera de comprendre pourquoi

Le phénomène de départ est simple: les flottants dépassent par défaut parce que c'est comme ça (it's a feature, not a bug).

Pour la solution avec un élément en clear:left|right|both, elle s'explique ainsi: cet élément va se placer visuellement en dessous des éléments flottants (à gauche, droite ou les deux) qui le précèdent (c'est le sens de la propriété clear). Et comme cet élément ne dépasse pas lui-même de son conteneur (car il n'est pas flottant ou positionné en absolu), sa position sera incluse dans le calcul de la hauteur du conteneur.