Centrer une DIV

Version imprimable

Centrer une DIV

Bonjour à tous,

Voilà, j'ai deux DIV dans lesquelles j'aimerais centrer une autre DIV dans chacune d'entre elles.

L'espacement entre chaque DIV est fixe de 18px, je pensais donc m'en sortir avec un padding / margin mais rien. le float center idem, je ne comprends pas.

Quelqu'un pourrait il me donner un coup de pouce ?

Un bout de code ? ;) oui bien sur... il s'agit comme vous allez vite le comprendre de centrer les DIV jaunes dans les DIV blanches.

Merci à vous

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
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
68
69
70
71
72
73
74
75
 
<!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" xml:lang="fr" lang="fr">
<HTML>
<HEAD>
  <TITLE> ... </TITLE>
<style> 
body {
overflow: auto; 
margin: 0px; 
padding: 0px; 
background-color: #e9e9e7;
}
.container{
width:985px;
margin:0 auto;
}
.header{
height:100px;
}
.column{
float:left;
height:350px;
}
#menu{
margin-top:150px;
width:167px;
background: white;
text-align:center;
}
.menu2{
width:131px;
background: #f6f8f7;
margin:18px
padding:18px
height: 500px;
background: yellow;
}
#content{
width:800px;
background: white;
}
.content2{
width:764px;
background: #f6f8f7;
margin:18px
padding:18px
height: 500px;
background: yellow;
}
#separation{
width:18px;
}
 
</STYLE> 
</HEAD> 
<BODY> 
 
<div class="container">
 
	<div class="header">HEAD</div>
 
	<div class="column" id="menu">MENU
			<div class="menu2">CENTRAGE 1</div>
	</div>
 
	<div class="column" id="separation"></div>
 
	<div class="column" id="content">
		<div class="content2">CENTRAGE 2</div>
	</div>
 
</div>   
</BODY>
</HTML>

13/05/2011, 10h12
Nheo_

Bonjour,

Un

Code:

margin : 0 auto;

permet de centrer tes div jaunes dans les blancs ;).
13/05/2011, 10h19
Gaetan_
Arf... je le fais pour les div principales et pas les autres...

Un GRAND merci à toi.

Petit renseignement :

J'ai setté la hauteur de mes DIV à 350px :
Code:

1 2 3 4 .column{ float:left; height:350px; }
Est ce possible qu'elles occupent toute la hauteur possible (entre le header et le footer, pas encore intégré) ?

Merci
13/05/2011, 10h30
Nheo_
Citation:

Envoyé par Gaetan_

Arf... je le fais pour les div principales et pas les autres...

Oui j'ai vu ça :mouarf:. C'est souvent comme ça : la réponse est la ... mais nos yeux ne veulent pas la voir :P.

Citation:

Envoyé par Gaetan_

Un GRAND merci à toi.

De rien.
Citation:
Envoyé par Gaetan_

Petit renseignement :

J'ai setté la hauteur de mes DIV à 350px :

Code:

1 2 3 4 .column{ float:left; height:350px; }

Est ce possible qu'elles occupent toute la hauteur possible (entre le header et le footer, pas encore intégré) ?

Merci
Alors, oui c'est possible :

Si tu veux que les div.column prennent toutes la place dispo, il faut que ton div.container ait une taille fixe et que tu ajoutes un height:100%;.

Tu mets donc :
Code:

1 2 3 4 5 6 7 .column{ height:100%; } .container{ height:800px;/*par exemple*/ }
13/05/2011, 10h33
Gaetan_

C'est la hauteur du #container qui me manquait donc !

Super Merci encore.

Génial..Strosuper !