[Résolu] Mise en page extensible avec 3 DIV côte à côte

Hello à tous,
J'aurais besoin d'un petit coup de main pour mettre en forme ma page web.
Pour vous aidez à comprendre voici la structure utilisée :

http://img255.imageshack.us/img255/1444/structurev.jpg

La structure de base est composée de 3 DIV, un en haut qui permet de fermer en haut le contenu, le même en bas (DIVs en bleu sur mon image) et enfin un au milieu qui n'a pas de taille et son background en repeat-y pour pouvoir être extensible. (DIV en rouge)
A l'intérieur on retrouve 3 DIV placés côte à côte avec la propriété float:left (les DIVs vert et violet).
L'idée était que en fonction de la taille des DIVs vert le div en rouge qui n'a pas de taille s'agrandisse pour avoir un site extensible verticalement.
Malheureusement les propriétés float posent problème et du coup je me retrouve avec mon DIV conteneur rouge qui n'a pas de taille alors que dedans ils y a des DIVs (en l'occurrence les verts et le violet)
Dans tous les cas pour plus de précision demandez moi
Merci pour le coup de main
Modifié par Aliasse (12 Jan 2011 - 02:50)

[#]

Aliasse a écrit :
Hello à tous,
J'aurais besoin d'un petit coup de main pour mettre en forme ma page web.
Pour vous aidez à comprendre voici la structure utilisée :

http://img255.imageshack.us/img255/1444/structurev.jpg

La structure de base est composée de 3 DIV, un en haut qui permet de fermer en haut le contenu, le même en bas (DIVs en bleu sur mon image) et enfin un au milieu qui n'a pas de taille et son background en repeat-y pour pouvoir être extensible. (DIV en rouge)
A l'intérieur on retrouve 3 DIV placés côte à côte avec la propriété float:left (les DIVs vert et violet).
L'idée était que en fonction de la taille des DIVs vert le div en rouge qui n'a pas de taille s'agrandisse pour avoir un site extensible verticalement.
Malheureusement les propriétés float posent problème et du coup je me retrouve avec mon DIV conteneur rouge qui n'a pas de taille alors que dedans ils y a des DIVs (en l'occurrence les verts et le violet)
Dans tous les cas pour plus de précision demandez moi
Merci pour le coup de main

Pour ceux qui sont éventuellement intéressés j'ai trouvé une solution ( ) ce n'est peut être pas la meilleure mais elle fonctionne.
J'ai simplement rajouter un élément, SPAN, DIV ou autres en dessous de mes DIVs vert et violet de taille 100% et avec l'attribut clear à both.
Pour résumé :

#close_contain {
    width:100%;
    height:1px;
    clear:both;
}

En espérant que cela puisse servir à quelqu'un

Si je peux me permettre je te propose une autre méthode
Tu appliques la class="clearfix" à l' éléments qui doit être clear. Dans ton cas il s'agit de ta div rouge.
Et tu ajoutes ça à ton css

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

C'est une méthode bien efficace et ça te permet d'éviter le markup html qui n'a pas de sens.

Mais sinon ta méthode est la plus efficace (clear: both; suffit d'ailleurs pas besoin du reste). Je te conseil quand même d'utiliser une class plutôt qu'une Id pour ton span car tu risques d'en avoir besoin plusieurs fois par page.

Ok merci pour le conseil je vais essayer, et tu as raison je vais utiliser une classe ca sera beaucoup plus propre et réutilisable
En tout cas merci du conseil