float & clear

**Belenos** · 25/10/2009, 21h43

Bonjour tout le monde,

Je suis en train de faire le design de mon site et j'ai un problème avec les propriétés css float et clear. J'ai fais de nombreuses recherche et beaucoup d'essais réfléchis (dans un premier temps puis à l'arrache au bout d'une heure). Mais rien n'y fait.
Je précise que je travaille sur Firefox.

le problème résumé avec ce code html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Test CSS des propriétés "float" et "clear"</title>
		<link rel="stylesheet" type="text/css" media="screen" href="float_clear.test.css" />
 
	</head>
	<body>
		<div id="conteneur">
			<div id="div1">
			</div>
			<div id="div2">
			</div>
			<div id="div3">
			</div>
			<div id="div4">
			</div>
		</div>
	</body>
</html>

puis ce code css

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
32
33
34
35
36
 
div{
	border:0px solid black;
	margin:0;
	padding:0;
	width:50%;
	height:50px;
}
#conteneur{
	background-color:rgb(220,220,220);
	width:100%;
	height:300px;
	float:none;
}
#div1 {
	background-color:yellow;
	height:100px;
	float:left;
}
#div2{
	background-color:red;
	height:70px;
	float:left;
	clear:left;
}
#div3 {
	background-color:blue;
	height:200px;
	float:right;
 
}
#div4 {
	background-color:green;
	float:right;
	clear:right;
}

Je voudrai qu'il y en ai 2 à gauche et 2 à droite. Alors bien sur là ce n'ai qu'une des 36 versions/combinaisons (float:right/left et clear:left/right; ) que j'ai retourné dans tout les sens sans succès. Malheureusement, au mieux il y en a 2 à gauche et 2 à droite mais il y a toujours un espace indésirable. Le fait que les divisions n'ai pas toutes la même hauteur reflète très bien ma page réelle. Je suis au courant que les block en float "ne sont pas contenu" dans le block "conteneur".

Je vais être obligé d'ajouter 2 <div> qui englobent chaque colonne? C'est à moitié nul...autant faire un tableau...je croyais que le design devait être indépendant du html...

Je m'en remet aux experts

**Belenos** · 26/10/2009, 12h24

Bon ça a pas l'air de passionner les foules (j'ai peut être pas était très clair). Alors pour ceux qui se poserai la même question un jour: j'ai fais 2 <div> en float:left; pour mes 2 colonnes et j'ai mis les autres <div> dans ces deux la.
Comme ça j'ai bien mes deux colonnes indépendantes et c'est vraiment plus simple que de s'embrouiller avec des float et des clear partout.

Un conseil mettez tout vos <fieldset> dans des <div>. Les <fieldset> sont peut-être des block mais ça réagit mal sur ces 2 propriétés (en particulier avec un clear;both sur la <div> pour fermer les <div> en float au dessus)

Fin du monologue.

float & clear

CSS

Vue hybride

Discussions similaires

Partager

Partager