Layout flexible à 1,2 ou 3 colonnes

Bonjour,

je souhaite créer une structure de thème qui me permettrait d'avoir un format/un gabarit fléxible.
Ce thème me permettrait de choisir "à la volée" d'avoir 1,2 ou 3 colonnes suivant mon humeur...

Le but est d'avoir une colonne centrale qui prend toute la place laissée vacante s'il n'y a pas de colonne de gauche et/ou de droite.

Le but est à terme d'avoir un thème xhtml/css pour Xoops.
une discussion est en cours à ce sujet sur XoopsFrance :
http://www.frxoops.org/modules/newbb/viewtopic.php?topic_id=16535&forum=15&post_id=94084#forumpost94084

Le positionnement CSS suffit-il à positionner correctement le bloc central, ou faut-il créer (dans le fichier theme.html) des boucles conditionnelles testant la présence ou l'absence des colonnes gauche et droite?

Le thème zetareticuli intègre cet capacité de layout flexible mais ce dernier n'est pas suffisamment commenté et la structure en est trop complexe.
Je cherche à créer un thème plus simple et plus accessible pour les néophytes (et commenté en français).

Merci de votre attention et de vos remarques.
--
universalix

Bonjour universalix,

Tu peux te baser sur l'exemple suivant :


Cependant, comme on ne sait pas à l'avance si on aura des blocs sur les côtés ou pas, on ne peut pas décaler le bloc central à l'aide de marges. On utilisera donc la propriété overflow, qui empêchera le bloc central de se glisser sous les flottants (s'il y en a). Je crois, pour la petite histoire, que l'overflow crée un contexte de formatage bloc, mais ça serait à vérifier (je ne voudrais pas dire de bêtise...).

Bref, il faut remplacer ceci :

div#centre {
	padding: 0.1px 20px;
	margin-left: 170px;
	margin-right: 310px;
	background: khaki;
}

Par ceci :

div#centre {
	padding: 0.1px 20px;
	overflow: hidden; [i]zoom: 1;[/i]
	background: khaki;
}

Deux précisions :
1 - les colonnes des côtés, si elles sont générées, devront se trouver AVANT la div#centre dans le flux (cf. les bases du positionnement flottant) ;
2 - la propriété CSS zoom utilisée ci-dessus est une extension propriétaire d'Internet Explorer Windows. Elle sert ici à déclencher le HasLayout pour le bloc div#centre, afin d'émuler la création d'un contexte de formatage dans IE Win... mais le fait de conférer le layout à un élément n'est pas anodin, et peut avoir des effets secondaires (mais globalement, ça devrait aller). De plus, comme il s'agit d'une propriété pour IE Win et lui seul, il serait préférable de l'isoler dans une feuille de style séparée, appelée via des commentaires conditionnels.

Par contre, je ne sais pas si l'overflow est géré correctement par IE7.

Hello,

ça fonctionne à merveille, j'ai juste eu à rajouter

clear: both; 

dans mon #footerbar pour que celui ci se place toujours en bas.

Merci beaucoup, de plus ça fonctionne aussi bien avec Safari qu'avec Firefox
@+
--
universalix