Positionnement de deux div dans une div

**Olivier Regnier** · 30/08/2007, 14h11

Bonjour

Je rencontre quelques soucis dans le positionnement de div. Je possède un foot et à l'intérieur deux div, footer-menu et footer-copyright. Voir l'exemple.

Avec le CSS suivant:

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
.footer {
            background-color:red;
            padding-bottom:10px;
	    padding-top:10px;
	    padding-left:10px;
	    padding-right:10px;
}
 
#footer-menu {
            background-color:green;
            width:25%;
}
#footer-copyright {
            background-color:yellow;
            width:25%;
}

Le code HTML est le suivant:

Code :

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

1
2
<div id="footer-menu">Footer menu</div>
<div id="footer-copyright">Footer copyright</div>

Je souhaite obtenir ce résultat. Voir l'exemple.

Pour cela, je modifie mon code CSS comme suit:

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
.footer {
            background-color:red;
            padding-bottom:10px;
	    padding-top:10px;
	    padding-left:10px;
	    padding-right:10px;
}

#footer-menu {
            background-color:green;
            width:25%;
            position:relative;
            float:left;
}
#footer-copyright {
            background-color:yellow;
            width:25%;
            position:relative;
            float:right;
}

J'obtiens toujours le même résultat. Voici l'exemple. Le module foot est mangé

Avez-vous une petite idée s'il vous plaît ?

Merci d'avance

**Tober** · 30/08/2007, 14h18

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<style type="text/css">
.footer {
	background-color:red;
	height:50px;
}
 
#footer-menu {
	background-color:green;
	width:25%;
	float:left;
}
#footer-copyright {
	background-color:yellow;
	width:25%;
	float:right;
}
</style>
<script language="JavaScript">
<!--
 
-->
</script>
</head>
<body>
<div class="footer">
<div id="footer-menu">Footer menu</div>
<div id="footer-copyright">Footer copyright</div>
</div>
</body>
</html>

bon je sais pas si c'est exactepent ça que tu veux, mais ça s'en rapproche

**Olivier Regnier** · 30/08/2007, 14h32

En jouant sur la hauteur du module foot, j'obtiens le résultat souhaité. Je vais opter pour cette solution

Merci Tobber

Si par hasard, vous avez une explication sur pourquoi le foot est réduit dans mon premier exemple, je suis preneur

**Tober** · 30/08/2007, 14h39

c'est pas le foot qui est réduit, mais les deux autres qui ont une taille minimale (j'ai appris ça dans un post récent

)

Envoyé par Candygirl

Moi non plus je ne vois pas le raport avec le texte; cette question n'est pas à me poser à moi mais à Microsoft... Le fait est que la hauteur min du div sur IE6 est celle du line-height qu'il y ait du texte ou pas. Par défaut le font-size en taille normal est 16, donc la hauteur min. d'un div autour de 19px. Vu que tu as 13px tu as 6 pixels de dépassement en haut comme en bas.

et ça pourrait expliquer ce "bug" d'affichage

**Candygirl** · 30/08/2007, 15h09

C'est parce que tes 2 éléments du footer sont en float et que leur contenu ne se déroule pas dans le flux normal et donc n'est pas pris en compte pour la hauteur de ton footer.

Tu peux éviter ce problème en attribuant, par exemple, à ton footer une propriété qui crèe un nouveau contexte de formatage (faire une recherche à ce sujet sur ce forum je n'ai malheureusement pas le temps de le faire moi).

**Olivier Regnier** · 30/08/2007, 15h52

Je comprends mieux ce qui se passe. Merci à tous les deux pour vos explications. Pour le moment, je vais jouer sur la hauteur du foot. Concernant le contexte de formattage, je vais y jetter un oeil un peu plus tard. Encore merci

Positionnement de deux div dans une div

Positionnement en CSS

Discussions similaires

Partager

Partager