28173 sujets

CSS et mise en forme, CSS3

Englober des flottants: quelle méthode?

Bonjour,

Je travaille actuellement sur une maquette où l'éternel problème des éléments non flottants contenant des éléments flottants et n'englobant pas ceux-ci (ouf!) resurgit à nouveau.

Ayant presque toujours utilisé jusqu'à présent la méthode dite d'Aslett — technique on ne peut plus incompréhensible — je me rends compte aujourd'hui que la solution de Paul O’Brien consistant à appliquer un overflow:auto au conteneur non flottant est non seulement parfaitement efficace, mais également tellement plus facile à mettre en œuvre!

J'aurais aimé connaître vos préférences, remarques ou habitudes quant à l'utilisation de l'une ou l'autre technique qui me paraissent toutes les deux fonctionnelles et diablement intelligentes.
Raphael a écrit :
Cela dépend de tes besoins.
Justement, je ne pense pas, non, puisque le résultat de l'utilisation des 2 techniques que j'ai citées dans mon premier post sera strictement identique.
Modifié par Benjamin D.C. (20 Oct 2006 - 15:45)
Pour ma part, j'utilise en général un overflow: hidden ou un overflow: auto, doublé (si besoin) d'une propriété conférant le layout à IE/Win.

Pour ce qui est de placer un clear: both sur un contenu généré via la pseudo-classe :after... je trouve ça un peu tarabiscoté, mais pourquoi pas. Disons que cela présente le même problème que le overflow:auto|hidden : pas de support sur IE Win.

Je me contente donc d'utiliser un clear:both lorsque j'ai un élément existant qui me permet de le faire.


Au fait, un mot d'Internet Explorer 7 :
- la propriété overflow: auto|hidden crée bien un contexte de formatage bloc avec IE7, comme avec les autres navigateurs modernes ;
- par contre, toujours pas de support pour :before et :after.
mpop a écrit :
Au fait, un mot d'Internet Explorer 7 :
- la propriété overflow: auto|hidden crée bien un contexte de formatage bloc avec IE7, comme avec les autres navigateurs modernes ;
- par contre, toujours pas de support pour :before et :after.
Une raison de plus, donc, pour favoriser l'utilisation de l'overflow Smiley jap
Salut,

pour ma part j'utilise la methode du AFTER. Sous IE, elle n'est pas reconnu mais IE gere bien la hauteur du conteneur de flottant.

Voila

A+
Modérateur
bonsoir ,

une 4eme methode est aussi envisageable Smiley smile .

display:table; !
ah non ! pas tapé , ce n'est pas d'un tableau dont je parle Smiley cligne .

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>display:table; / display:inline-block;</title>
<style type='text/css'>
ul {
	float:left;
	margin:0 1em;
	padding:0 1em;
	border:1px solid #eee;
/* enlevons le bug de "double marge" d'IE */
	display:inline;
}
div {
background:gray;
/* activons les "layout" respectif des navigateurs */
	display:table;       /* pour ff */
	display:inline-block;/* pour IE , opera  et les autres vraisemblablement */
	width:100%;          /* pour reprendre le comportement de base d'un "block" */
}</style>
</head>
<body>
<div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h1>Alternative a , overflow, clear both ou :after</h1>
<p>un petit paragraphe pour faire : bonjour le monde ! ça va ?</p>
</div>
</body>
</html>


Voila , testez cette methode , qui confere un layout autant dans IE que firefoxe , ..... les flottant n'ont qu'a se tenir tranquille , non mais !

++
Sujet clos
Aller à