Float dans un float

**PodoLaBrute** · 26/08/2010, 22h14

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.

**sevian** · 27/08/2010, 16h39

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

**PodoLaBrute** · 30/08/2010, 08h28

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**kursushc** · 05/09/2010, 16h15

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+

**PodoLaBrute** · 08/09/2010, 09h59

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.

**Bisûnûrs** · 08/09/2010, 10h25

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.

Float dans un float

CSS

Vue hybride

Discussions similaires

Partager

Partager