Discussion :

[baggie]

Bonjour,

j'ai 3 divs à aligner horizontalement.
Chaque div est entouré de deux autres divs : un "header" et un "footer".

J'ai testé avec la propriété float: left; mais rien à faire, mes divs ne s'alignent pas comme il le faudrait

Mon 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
 
<div id="sous_content">
	<div class="home_cadre_header"></div>
	<div class="home_cadre">
	 ........
	</div>
	<div class="home_cadre_footer"></div>
	<div class="home_cadre_header"></div>
	<div class="home_cadre">
		..........
	</div>
	<div class="home_cadre_footer"></div>
	<div class="home_cadre_header_beige"></div>
	<div class="home_cadre_beige">
		............
	</div>
	<div class="home_cadre_footer_beige"></div>
</div>

Ma 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
 
.home_cadre_header {
	background-image: url(images/cadre_home_header.png);
	background-repeat: no-repeat;
	width: 321px;
	height: 8px;
}
 
.home_cadre {
	background-image: url(images/cadre_home_bg.png);
	background-repeat: repeat-y;
	width: 321px;
	height: 248px;
	padding: 0 5px;
}
 
.home_cadre_footer {
	background-image: url(images/cadre_home_footer.png);
	background-repeat: no-repeat;
	width: 321px;
	height: 7px;
}

En mettant des float: left;, les "header" et "footer" ne restent pas collés à leur div principal. Du coup tout se décale.

Comment dois-je faire ?

[Invité]

Bonjour,

Code :

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

margin:0; /* partout */

Le mieux étant d'avoir aussi :

Code :

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

html, body { width:100%; height:100%; margin:0; padding:0; }

[baggie]

Merci pour cette réponse.

Cela n'a rien changé malheureusement

je vais peut-être préciser la construction totale de la page :

> j'ai un header et un bandeau avec un menu principal, donc 3 divs les uns sous les autres.
> ensuite un wrapper qui englobe :

• un div principal (disons de 500 de haut)
• un autre div sur la droite composé de deux divs l'un sous l'autre (250 de haut chacun, la moitié du grand pour chaque)

> enfin : mes 3 divs à aligner horizontalement (les 2 premiers faisant la largeur totale du div principal et le dernier s'inscrivant parfaitement à la fois dans la colonne des deux divs de droite, et dans la ligne des 2 divs horizontaux.

Mon seul soucis vient de mes 3 divs du bas qui ne s'alignent pas comme il le faudrait.

Ma CSS (pour le positionnement) :

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
 
#header {
 
}
/* Menu principal */
#main_menu {
	margin-top: 30px;
	height: 41px;
}
 
#bandeau {
	text-align: center;
}
/* contient les deux divs : le principal et celui de droite contenant les 2 petits divs */
#content {
}
 
#left_content {
	float: left;
	position: relative;
	margin-right: 10px;
	margin-bottom: 10px;
}
 
#right_content {
	float: left;
	position: relative;
}
 
/* contient les 3 divs horizontaux */
#sous_content {
 
}
 
/* tentative de regroupement de chaque "header + div + footer" en un seul div */
#a, #b, #c {
	float: left;
}

Euh, c'est compréhensible là ?

Sachant que mes divs contenus dans #a, #b et #c ont les classes de mon premier message.

Vous voyez comment faire ?

[EDIT] : problème résolu, je devais mettre en float: left; le div contenant #a, #b et #c.

[Emyleen]

Bonjour!

Alors je n'ai pas hyper bien compris tout ce que tu as dit, mais le mieux serait d'avoir quelque chose comme ça :

Code html :

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

1
2
3
4
5
6
 
<div id="conteneurDeColonnes">
     <div id="colonneGauche" class="colonne"></div>
     <div id="colonneMilieu" class="colonne"></div>
     <div id="colonneDroite" class="colonne"></div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
.colonne {
    display: inline-block;
    width: 200px;
    min-height: 300px;
    margin-right: 20px;
}
.colonne:last-of-type {
    margin-right: 0;
}

En espérant t'avoir aidé ^^