Superposition de div

**faya972** · 19/03/2009, 21h41

Bonjour, je sais que le sujet est connu mais je galère ...

Voici ce que je désire obtenir :

Les div A et B se suivent dans le flux.
A1 et A2 sont respectivement en float left et right dans la div A.
La hauteur de la div A dépend de celle de la div A1.

J'aimerais que lorsque A2 est plus grande que A, elle chevauche la div du dessous (B).

Voilà voilà ... si quelqu'un à une piste. Merci d'avance.

**12monkeys** · 19/03/2009, 21h55

Bonsoir

Je pense avoir compris ce que tu veux, tu aura une réponse dans ces deux tutoriels : http://css.developpez.com/tutoriels/...issement-flux/ et http://css4design.developpez.com/tut...flux-partie-2/.

Bonne lecture

**faya972** · 19/03/2009, 22h03

Merci beaucoup, je consulte et je posterai la solution.
Si je trouve !

**faya972** · 19/03/2009, 22h25

Alors ... j'ai l'impression que les méthodes proposées ne correspondent pas à ce que je veux :

la propriété overflow permet à la div A de prendre en compte la hauteur de A1 et A2 or c'est justement ce que je ne veux pas :

j'aimerais qu'elle s'adapte seulement à la hauteur de A1 mais que A2 dépasse ET chevauche B.

Ce doit être une question de z-index et position mais je ne trouve pas le bon mélange

EDIT :

Voici un exemple qui fonctionne sous Firefox et pas sous IE

:
http://fayanet.ovh.org/test/

En cliquant sur les titres, la div B ne bouge pas et c'est bien ce que je veux.
Reste à dompter IE ...
(le lien du CSS est dans la div B)

**12monkeys** · 19/03/2009, 23h13

Ok j'avais compris l'inverse...

En réfléchissant rapidement je dirais si tu peut donner une hauteur fixe à la div A ce serait un plus :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Page d'accueil</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div { margin:10px;padding:10px; }
body { width:500px; }
</style>
</head>
 
<body>
 
<div style="border:1px solid black;height:400px;background:white;">
A
  <div style="border:1px solid black;float:left;width:40%;">
A1
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
 
  <div style="border:1px solid black;float:right;width:40%;background:purple;">
A2
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
</div>
 
<div style="border:1px solid black;background:yellow;">
B
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
 
</body>
</html>

Sinon je verrais la position relative :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Page d'accueil</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div { margin:10px;padding:10px; }
body { width:500px; }
</style>
</head>
 
<body>
 
<div style="border:1px solid black;background:white;">
A
  <div style="border:1px solid black;width:180px;float:left;">
A1
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
 
  <div style="border:1px solid black;position:relative;left:0px;top:0px;width:180px;background:purple;overflow:hidden;">
A2
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
</div>
 
<div style="border:1px solid black;background:yellow;">
B
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</body>
</html>

Cette dernière solution me parrait beaucoup plus bancale, je n'ai testé qu'avec firefox 3. Le css se trouve dans le html, désolé, mais ça va plus vite comme ça, faut pas le refaire...

Sinon quelqu'un d'autre trouvera peut être une autre solution...

**Erwan31** · 20/03/2009, 01h09

Bonsoir,
c'est faisable sans trop de difficultés en positionnant le bloc A2 en absolute, c-a-d retiré du flux.
Mais autant se passer de positionnement absolue et utiliser une solution à base de flottants et de blocs en flux normal:

Code :

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

1
2
3
4
5
<div>A
	<div style="float:right; height: 500px; width: 500px; ">A2</div>
	<div>A1</div>
</div>
<div>B</div>

L'astuce consiste à exploiter justement le flottement pour retirer partiellement le bloc A2 du flux normal vis à vis de son bloc parent (A ici)
donc sans qu'il puisse influer sur la hauteur de A.
Ce bloc doit se trouver AVANT le bloc A1 dans le code pour s'afficher au même niveau.

Attention, pour que cette méthode fonctionne sous IE7- (au passage ne pas oublier de tester sous IE8 qui vient de sortir en version finale) les blocs A et B ne doivent pas avoir le layout, c-a-d qu'il se doivent pas être dotés de largeur ou hauteur (principalement).
Le layout provoque ici un comportement non standard sous IE7- > le bloc englobe ses enfants flottant alors que ça ne devrait pas.

Superposition de div

CSS

Vue hybride

Discussions similaires

Partager

Partager