Alignement de blocs div. A devenir dingue !

**will89** · 19/08/2007, 14h00

Bien je bonjour tout le monde... Je suis en train de me faire un petit blog et je galère sur un problème à cause du CSS.
Voici une page témoin de mon CSS : http://mouchel.philippe.free.fr/playablog/test.php
et voici le code qui gere le positionnement des blocs de mon blog

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
37
38
39
40
41
42
43
#site {
	margin: auto;
	width: 960px;
}
 
#banniere {
	width: 960px;
	height: 190px;
	background-color:#999999;
}
 
#menu {
	width: 960px;
	min-height: 36px;
	background-image: url(img/fond_menu.jpg);
	background-repeat: no-repeat;
}
 
#conteneur {
	width: 960px;
}
 
#contenu_gauche {
	width: 758px;
	min-height: 200px;
	border-left: #333333 groove 2px;
	border-right: #333333 ridge 2px;
	border-bottom: #333333 ridge 2px;
}
 
#contenu_droit {
	width: 202px;
	min-height: 200px;
	border-right: #333333 ridge 2px;
        border-bottom: #333333 ridge 2px;
	background-color: #CC9900;
}
 
#bottom {
	width: 960px;
	height: 70px;
	background-color: #33FF66;
}

Je voudrais que le bloc marron se retrouve a droite du bloc blanc entouré de gris au lieu de en dessous, mais même en calculant les bonnes largeurs en tenant compte de l'épaisseur des bordures pas moyen de les aligner.. J'ai aussi essayer un float: right; pour le bloc contenu_droite ça le décale a droite sans le faire remonter. J'aimerais éviter de le faire remonter avec le margin top négatif je trouve pas ça top pis sa marchera pas vu que le contenu de gauche par rapport auquel il se positionnerait est variable (hauteur variable donc)

Voilà je vous mets aussi un lien vers le fichier CSS complet au cas ou le pb viendrait pas de ce bout de code.
http://mouchel.philippe.free.fr/play...laya_flash.css

En espérant que l'un d'entre vous pourra m'aider, moi ça fait deux jours que je m'arrache les cheveux (alors que pourtant j'ai déjà fait plusieurs à l'architecture similaire à chaque fois sans soucis

)

**alexp** · 19/08/2007, 22h35

en visualisant ta page sous firefox et konqueror, le bloc marron se trouve bien à la droite du bloc blanc et à la meme hauteur

**will89** · 19/08/2007, 23h19

Pardon c'est que j'ai continué à chercher et du coup ça a un peu bougé. J'ai essayé en rajoutant par exemple des float:left; et foalt:right dans les divs correspondant (contenu_gauche et contenu_droit). Cela a eu pour effet de bien positionner les blocs mais en faisant apparaitre un nouveau problème. Le bloc bottom s'aligne alors avec le bloc de droite uniquement, quitte à venir par dessus celui de gauche (qui est tout de même celui du contenu même de ce blog).

J'ai donc remis le fichier comme au début en espérant que l'un de vous puisse me dépanner.

**MasterOfChakhaL** · 20/08/2007, 07h43

Salut,

As-tu essayé de metter un "float: left" sur tes éléments contenu droite et gauche puis un "clear: both" sur l'élément bottom afin que celui-ci passe sous tes deux colonnes?

**will89** · 20/08/2007, 12h27

Ah oui le clear:both; Je l'avais completement oublié. Génial c'est exactement ce qu'il me fallait.. En combinant ça avec une ancienne css que j'avais réalisé, voici ce que ça donne :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Essai CSS</title>
<style type="text/css">
#site {
	margin: auto;
	width: 960px;
}
 
#banniere {
	width: 960px;
	height: 190px;
	background-color:#999999;
}
 
#menu {
	width: 960px;
	height: 36px;
	background-image: url(img/fond_menu.jpg);
	background-repeat: no-repeat;
}
 
#conteneur {
	width: 956px;
	height:auto;
	border-left: #333333 groove 2px;
	border-right: #333333 ridge 2px;
	border-bottom: #333333 ridge 2px;
}
 
#contenu_gauche {
	float:left;
	width: 756px;
	border-right: #333333 ridge 2px;
}
 
#contenu_droit {
	float:right;
	width: 198px;
	min-height: 100%;
}
 
#bottom {
	clear:both;
	width: 956px;
	height: 70px;
	background-color: #33FF66;
	border-top: #333333 ridge 2px;
}
</style>
</head>
 
<body>
<div id="site">
    <div id="banniere"></div>
    <div id="menu"></div>
    <div id="conteneur">
        <div id="contenu_gauche"></div>
        <div id="contenu_droit"></div>
    	<div id="bottom"></div>
    </div>    
</div>
</body>
</html>

Voici l'illustration du résultat : par là.

Merci à tous surtout MasterOfChakhaL.

Alignement de blocs div. A devenir dingue !

Positionnement en CSS

Discussions similaires

Partager

Partager