2 colonnes SANS utiliser "float" ?

Evocatii · 27/02/2009, 18h02

Bonjour,

Est-ce qu'il est possible de faire une mise en page sur 2 colonnes sans utiliser la propriété CSS "float" ?

Code :

<div class="colonnes">
 
<div class="gauche"></div>
<div class="droite"></div>
 
</div>

Merci,
Evocatii

Ethyde · 27/02/2009, 18h07

Oui avec les positions mais cela nécessite un petit correctif javascript pour que le pied de page reste en bas de la colonne la plus longue.

Voila en gros ce que cela peu donner :

Code :

<head>
<style>
#colonnes {
	background :#0000ff;
	position :relative;
	margin :0 auto;
	width :500px;
}
#gauche {
	background :#000000;
	position : absolute;
	left:0;
	width :25%;
}
.droite {
	background :#00ff00;
	position :absolute;
	left:85%;
	top:0;
	width :30%;
}
 /**
 *	Correction des positions absolue pour le pied de page
 *	
 */
 
.clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
 
</style>		
</head>
<body>
<div class="colonnes clear_children">
 
<div class="gauche cc_tallest"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="droite cc_tallest"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
 
</div>
<script src="si-clear-children.js" type="text/javascript"></script>
</body>
</html>

Pour plus d'info sur le javascript utilisé : clearing absolutely positioned elements

Bon par contre ce n'est pas sans contrainte, "jouer" avec les positions absolue et relative peut être assez délicat.

Erwan31 · 27/02/2009, 18h58

Bonsoir,
le positionnement absolue ne devrait être utilisé qu'en dernier recours:

> il est préférable de conserver les éléments dans le flux normal autant que possible.

> Peut poser des problèmes lors de l'agrandissement du texte (moins crucial depuis la relative généralisation du zoom graphique mais encore d'actualité...)
de chevauchement de contenus et d'allongement du bloc conteneur.

> Peut poser certaines problème de cohérence entre ce qui est affiché et ceux qui est lu par un lecteur d'écran > http://www.w3.org/TR/WCAG20-TECHS/C27.html

> Les contenus ne pourront pas se linéariser comme avec des flottants lors du redimensionnement du viewport (zone d'affichage) ou d'une consultation du site sur des résolution inférieures à celle qui est indiquée ou sur de petites écrans > inaccessibilité visuelle

Bref rien n'interdit de l'utiliser mais il faut savoir anticiper sur les défaillances qui en découlent.

Ethyde · 27/02/2009, 23h33

Y a un moment moi je mis perd :

Citation:

Envoyé par Erwan31

> il est préférable de conserver les éléments dans le flux normal autant que possible.

le float sort aussi l'élément du flux normal

Citation:

Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur.

Source : http://openweb.eu.org/articles/initiation_float/ donc pour placer des éléments ça commence à devenir compliquer

Citation:

Envoyé par Erwan31

> Peut poser certaines problème de cohérence entre ce qui est affiché et ceux qui est lu par un lecteur d'écran > http://www.w3.org/TR/WCAG20-TECHS/C27.html

Oui mais placer un menu en fin de page alors qu'il est afficher en ailleurs améliore l'accessibilité

Citation:

Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour :

* placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ;
* créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML.

Source : http://openweb.eu.org/articles/initiation_absolue/

Non pas que j'aime être contrariant (encore que), mais là ...

Erwan31 · 28/02/2009, 02h38

Bonsoir Ethyde,
en effet les choses ne sont pas toujours évidentes, d'ailleurs je dirais qu'il y a 2 écoles à ce niveau là

Citation:

Envoyé par Ethyde

Y a un moment moi je mis perd :
le float sort aussi l'élément du flux normal

Oui et non, il est retiré du flux normal vis à vis de son parent (sauf sous IE7- si le block a le layout), des éléments de block adjacents mais influence le positionnement des éléments inline et des textes anonymes (non balisés) adjacents, tandis que le positionnement absolue est totalement sorti du flux normal vis à vis des autres éléments ce qui n'est pas sans poser problème lorsque des contenu doivent être poussés ou couler autour.
Le seul moyen d'ancrer un élément positionné de manière absolue au "flux" est de ne pas le positionner (équivaut à top/left/right/bottom fixés à auto)

Citation:

Envoyé par Ethyde

Source : http://openweb.eu.org/articles/initiation_float/ donc pour placer des éléments ça commence à devenir compliquer

Certe c'est plus compliqué mais pas inenvisageable dans bien des cas.

Citation:

Envoyé par Ethyde

Oui mais placer un menu en fin de page alors qu'il est afficher en ailleurs améliore l'accessibilité
Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour :

* placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ;
* créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML.

Non pas que j'aime être contrariant (encore que), mais là ...

Certaine de ces affirmations me semblent un peu simplificatrices surtout venant de Laurent Dnis. Bizarre

Ceci dit ces articles d'Open Web ont conservé leur côté vulgarisation et simplification des standards. L'article d'origine date un peu et le niveau général s'est nettement amélioré depuis (vers 2003 peut-être).

Placer un menu en bas de page ok pas de problème (via le positionnement fixe aussi) , on le fait tous et il n'y a pas d'autre moyen d'y arriver sans devoir passer par un tableau.
Pour les navigateurs texte en effet, je n'avais pas pensé à cet aspect des choses même si ça touche d'avantage le versant ergonomie que l'accessibilité.

Après pour le reste ben ça demande anticipation pour les raisons que je t'ai citées.
D'autre part il existe une autre technique (un peu expérimentale certes mais moins casse gueule à mon avis) pour sortir un élément du flux normal et inverser ainsi l'ordre d'apparition des bloc: la propriété direction même si elle n'a pas du tout été créé à cet effet.

27/02/2009, 18h02	#1
Evocatii Membre régulier Inscription: mai 2007 Messages: 110	2 colonnes SANS utiliser "float" ? Bonjour, Est-ce qu'il est possible de faire une mise en page sur 2 colonnes sans utiliser la propriété CSS "float" ? Code : <div class="colonnes"> <div class="gauche"></div> <div class="droite"></div> </div> Merci, Evocatii
	00

27/02/2009, 18h58	#3
Erwan31 Expert Confirmé Sénior Inscription: février 2008 Localisation: Revel Messages: 2 177	Bonsoir, le positionnement absolue ne devrait être utilisé qu'en dernier recours: > il est préférable de conserver les éléments dans le flux normal autant que possible. > Peut poser des problèmes lors de l'agrandissement du texte (moins crucial depuis la relative généralisation du zoom graphique mais encore d'actualité...) de chevauchement de contenus et d'allongement du bloc conteneur. > Peut poser certaines problème de cohérence entre ce qui est affiché et ceux qui est lu par un lecteur d'écran > http://www.w3.org/TR/WCAG20-TECHS/C27.html > Les contenus ne pourront pas se linéariser comme avec des flottants lors du redimensionnement du viewport (zone d'affichage) ou d'une consultation du site sur des résolution inférieures à celle qui est indiquée ou sur de petites écrans > inaccessibilité visuelle Bref rien n'interdit de l'utiliser mais il faut savoir anticiper sur les défaillances qui en découlent. Dernière modification par Erwan31 ; 27/02/2009 à 19h26.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email