Float dans un float

Version imprimable

26/08/2010, 22h14
PodoLaBrute

Float dans un float

Bonsoir.

J'ai rencontré un problème lorsque je voulais aligner mes blocs div horizontalement grâce a la propriété float:left;. Ils ne s'alignent pas horizontalement.

Ces derniers sont contenus dans un div, qui a lui aussi la propriété CSS float:left;.

J'ai cru comprendre que le fait que le bloc parent soit aussi en float soit la source de mon problème.

Avait vous un hack quelconque ou mieux, une propriété CSS pour palier a ca?

Merci.
27/08/2010, 16h39
sevian

Montre nous le html/css correspondant.
il me semble avoir déjà fait du float dans un float sans problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
	<head>
	</head>
	<body>
		<!-- Colonne de gauche -->
		<div style="width:70%; height:300px;background:red;float:left;">
			<!-- Article 1 -->
			<div style="width:100%; height:100px;background:yellow;margin:10;padding:10;">
				<!-- Texte -->
 
				<p>Bloc de texte avant les boîtes flottantes. Bloc de texte avant les boîtes flottantes. Bloc de texte avant les boîtes flottantes. Bloc de texte avant les boîtes flottantes. Bloc de texte avant les boîtes flottantes. </p>
				<!-- Bloc flottant 1 -->
				<div style="width:45%; height:50px;background:green; margin:10; float:left;"></div>
				<!-- Bloc flottant 2 -->
				<div style="width:45%; height:50px;background:green; margin:10; float:left;"></div>
				<!-- Bloc flottant 3 -->
				<div style="width:45%; height:50px;background:green; margin:10; float:left;"></div>
				<!-- Bloc flottant 4 -->
 
				<div style="width:45%; height:50px;background:green; margin:10; float:left;"></div>
			</div>
			<!-- Article 2 -->
			<div style="width:100%; height:100px;background:yellow;margin:10;"></div>
			<!-- Article 3 -->
			<div style="width:100%; height:100px;background:yellow;margin:10;"></div>
		</div>
		<!-- Colonne de droite -->
		<div style="width:29%; height:250;background:blue;float:right;"></div>
 
	</body>
</html>

Voila pour un bout de code test qui illustre en plus simple ce que je veux faire.
Ca semble fonctionner sur IE mais pas sous FF et Chrome.

05/09/2010, 16h15
kursushc

Salut,

Ca vient sûrement du fait que tes boîtes flottantes font 45% de large.
45*4>100... Tente avec 23% pour être sûr (éviter les conflits avec les borders, etc.)

a+
08/09/2010, 09h59
PodoLaBrute

Désole ça ne marche pas en réduisant la taille de mes blocs.
Je voudrais juste que le bloc parent (Soit ), s'adapte en hauteur par rapport a son contenu. Ce qu'il fait a merveille mais sans prendre en compte les blocs flottants a l'intérieur. Ce qui fait que je les retrouve en train de flotter sur l'article du dessous.
08/09/2010, 10h25
Bisûnûrs

On peut constater plusieurs choses dans ton code :

- Invalidité du code HTML :

Il serait bon de commencer par mettre un DOCTYPE complet et valide si tu veux que l'ensemble des navigateurs interprète ton code à peu près de la même manière. Actuellement ils sont en mode Quirks et le modèle de boite Microsoft de IE (entre autres) est totalement différent de celui du W3C adopté par les autres navigateurs.

- Invalidité du code CSS :

Toutes les valeurs CSS numériques de dimensions prennent des unités, pour savoir de quoi on parle. Dans ton cas, tu mets un padding et un margin de 10. 10 quoi ? Patates ? La seule exception est la valeur 0 qui n'a pas besoin d'unité (en effet, qu'il y ait 0 patates, 0 choux ou 0 pixels c'est du pareil au même).

Quand tu auras corrigé tout ça, ton problème apparait identique sur tous les navigateurs. Il s'agit simplement d'un problème de dépassement de flottants qui peut être corrigé par l'ajout d'un nouveau contexte de formatage bloc.
08/09/2010, 11h15
PodoLaBrute

Bon tout d'abord Quant a ta réflexion sur les doctypes etc.. Sache que je suis d'accord avec toi et que s'ils n'apparaissent pas ici, c'est tout simplement que je n'ai pas voulu surcharger mon exemple dans mon post. Le CSS est bien valide dans ma feuille de style lui aussi rassure toi :)

Enfin merci, car je crois avoir solutionné mon problème grâce a ta reponse et au lien que tu m'a fourni (Je pense ajouter un "overflow:auto;"). Je n'ai pas encore testé sur mon site, mais sur mon test ca fonctionne.

Encore merci pour l'article sur le contexte de formatage, il m'a vraiment aidé ;)

Cordialement.