comment mettre des div au meme niveau?

**charlene44** · 26/10/2006, 20h55

bonjour,

sur ma page je voudrai créé 3 div en fait sauf qu'il faut imperativement qu'ils soient au meme niveau, qu'il n'y ai pas de saut de ligne, et evidemment ces div ne sont pas imbriqués, donc comment est-ce que je pourrai faire please?

extrait du 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
37
38
39
40
41
 
/*---------------------------------------ID-------------------------------------------*/
 
#dessus
{
background : url(images/top.jpg) no-repeat center top;
width : 100%;
height : 180px;
position : relative;
text-align : center;
margin : 0 auto;
}
 
#page
{
background : url(images/centre.png) repeat-y;
width : 878px;
margin : 0 auto;
padding : 0;
padding-right : 5px;
text-align : center;
}
 
/*------------------------------------CLASS------------------------------------*/
 
.news
{
border : 1px solid black;
width : 51.26%;
height : 250px;
margin-left : auto;
margin-right : auto;
}
 
.espace_perso
{
border : 1px solid black;
width : 19.36%;
height : 250px;
margin-left : 26px;
}

extrait XHTML strict :

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
 
<body>
 
<div id="dessus">
</div>
 
  <div id="page">
   <div class="news">
   blabla
   </div>
 
   <div class="espace_perso">
   blabla
   </div>
 
</div>

**trotters213** · 27/10/2006, 08h59

Ola muchacha

,

Envoyé par charlene44

Code :

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

1
2
3
4
5
6
7
8
9
 
<body>
 
<div id="dessus">
</div>
  <div id="page">
    <div class="news">blabla </div>
    <div class="espace_perso">blabla</div>
  </div>

Non seulement elles sont imbriquées mais en plus il y en a une qui n'est pas fermée (bon je suppose que tu as tout simplement oublié le </div>).
Pour les avoir sur la même ligne il faut (bon déjà qu'elles ne soient pas imbriquées bien sur) que tu donnes l'attribut float:left à chacune des divs que tu veux mettre sur la même ligne et que, bien entendu, la somme des largeurs de tes 3 divs ne soit pas plus grande que la largeur du conteneur

**charlene44** · 27/10/2006, 14h29

ouais ca marche, mais j'ai un probleme, mon div conteneur ne s'adapte pas au contenu, alors qu'avant il s'adaptait...

voila le nouveau 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
37
38
39
40
41
42
43
 
#page
{
background : url(images/centre.png) repeat-y;
width : 878px;
margin : 0 auto;
padding-top : 10px;
padding-bottom : 10px;
padding-right : 5px;
text-align : center;
}
 
/*------------------------------------CLASS------------------------------------*/
 
.espace_perso
{
border : 1px solid black;
width : 19.36%;
height : 250px;
margin-left : 26px;
float : left;
}
 
.news
{
border : 1px solid black;
width : 51.26%;
height : 250px;
margin-left : 15px;
margin-right : 15px;
float : left;
}
 
 
 
.agenda
{
border : 1px solid black;
width : 19.36%;
height : 250px;
margin-right : 26px;
float : right;
}

**trotters213** · 27/10/2006, 14h40

Attends je ne comprends pas, tu garde le code HTML de tout à l'heure ou tu l'as changé ?
Tu souhaites obtenir quoi à la compté ?

**charlene44** · 27/10/2006, 14h53

oui je garde le meme code html, et je souhaiterai obtenir ca :

(réalisé en attribuant une valeur height en nb de pixels, ce que je ne veux pas)

apercu

et le fond blanc en fait qui correspond a mon div "page" doit se repeter en s'adaptant au contenu, et si je ne fixe pas de valeur à height il ne se repete pas..

**trotters213** · 27/10/2006, 15h07

le problème c'est que je n'ai pas ton image.
Dans ce code qu'est ce qu'il ne va pas par exemple ?

Code HTML :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page test</title>
<style type="text/css">
#page {
background:url(images/centre.png) repeat-y;
width:878px;
margin:0 auto;
padding:10px 5px 10px 0px;
text-align:center;
}
 
.espace_perso,
.news,
.agenda {
border:1px solid #000;
height:250px;
float:left;
}
 
.espace_perso {
width:19%;
margin-left:25px;
}
 
.news {
width:50%;
margin-left:10px;
margin-right:10px;
}
 
.agenda {
width:19%;
margin-right:25px;
}
</style>
</head>
 
<body>
<div id="page">	
	<div class="espace_perso">espace_perso</div>
	<div class="news">news</div>
	<div class="agenda">agenda</div>
</div>
</body>
</html>

PS : j'ai rétréci tes marges sinon c'est trop large et ça ne rentre pas sous IE.

**Candygirl** · 27/10/2006, 15h21

Envoyé par charlene44

ouais ca marche, mais j'ai un probleme, mon div conteneur ne s'adapte pas au contenu, alors qu'avant il s'adaptait...

C'est normal puisque maintenant il ne contient que des flottants; il n'a donc pas de hauteur.

Auras-tu du contenu en-dessous de tes flottants ? ou un footer? SI oui, il te suffit d'appliquer la propriété clear à la suite de ton contenu pour que tout rentre dans l'ordre.

S'il n'y a rien d'autre que tes floattants, il y a diverses solutions comme utiliser la pseudo-class:after pour placer le clear ou ajouter un br, hr, div vide pour clearer (perso je n'aime pas trop) ou encore suivant le cas mettre le conteneur lui-même en float.

**charlene44** · 27/10/2006, 16h02

trotters213 :

ton code marche, j'ai bien le div qui s'adapte au contenu mais mon background ne se repete pas.

candygirl : je n'ai pas bien compris l'histoire du clear, j'ai cherché un peu et j'ai vu qu'elle pouvait admettre les valeur left, right, both, et none mais je ne vois pas comment l'appliquer dans mon cas...

j'ai aussi essayé avec un div mais je suis obligé d'écrire quelque chose dedans sinon ca ne change rien

**trotters213** · 27/10/2006, 19h48

en gros CandyGirl te dit de faire ceci :

Code HTML :

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

1
2
3
4
5
6
<div id="page"> 
	<div class="espace_perso">espace_perso</div>  
	<div class="news">news</div>  
	<div class="agenda">agenda</div> 
	<div style="clear:both;"></div>
</div>

afin que le e sommet du bord externe de ta boîte flottante page doit se trouver en dessous de toutes les boîtes précédentes (espace_perso, news et agenda).
Pour mieux voir ça, tu peux tester en rajoutant une bordure à ta div page

Code CSS :

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