[ok] Alignement de cadres avec attribut float:Soucis de positionnement

Bonjour à tous

Je viens discuter avec vous d'un soucis que je rencontre.
Tout d'abord, quelques explications :

- J'ai une page avec une largeur fixe.
- Je place à l'intérieur des cadres de taille variable. Je veux qu'ils occupent tout l'espace.
- J'applique aux cadres un attribut

float : left;

pour les aligner horizontalement et créer un retour à la ligne si besoin.

Voici mon soucis, ici expliqué avec 3 cadres div. Je les écris dans la page html dans l'ordre 1, 2 puis 3.

Photo 1 : Ici pas de problème, j'occupe bien l'espace


Photo2 : Ici c'est plus complexe. Je veux que le cadre 3 soit coller au cadre 1, sinon je perds beaucoup de place !
>

Voici le css associé (ça n'apporte rien mais c'est pour être complet) :

#contenu /* Correspond au cadre qui englobe tous les autres cadres */
{
	float : left;
	width : 687px;
	position : relative;/* Pas indispensable */
}

div.cadreArticle /* Appliqué à chacun des 3 cadres */
{
	border-width : 2px;
	border-style : solid;
	
	border-top : none;

	margin-right : 5px;
	margin-left : 5px;
	margin-bottom : 10px;
	margin-top : 10px;
	
	float : left;
	
	background-image : url('../img/opac/opac60.png');
	z-index : 3;
}

Modifié par gaboul49 (06 May 2010 - 10:55)

Je ne pense pas que ca marchera avec des flottants... Tu devrais changer un peu la conception de ton design vers une structure en deux colonnes ...

Merci de ta réponse spiral123.

Le soucis ici est que je ne connais pas à l'avance la largeur de mes cadres. Si les cadres sont fins peut-être qu'il s'en affichera 3 ou 4 sur la même ligne...



Je pense que la seule solution pour moi va être de placer tous les cadres en

position : absolute;

et de gérer le placement via top, bottom, left et right pour chacun des cadres...
ça sera beaucoup plus flexible mais ça va m'obliger à faire beaucoup de configurations manuelles et m'obliger à gérer les marges entre les cadres soit en calculant, soit en faisant "à vue de nez".

Merci de m'avoir aidé à prendre cette décision