Div qui passe dessous [Résolu]

[Equinoxe5]

Bonsoir,
J'ai un petit souci d'alignement de div que je n'arrive pas à positionner.

J'ai sur ma page 3 div.
un à gauche qui contient des données variables et qui a une hauteur que je ne souhaite pas définir de manière à ne pas avoir d'ascenseur.
A droite, 2 div de 300px de haut chacun.
Tous les 3 sont en float: left

Voici mon problème:
Si le div de gauche comporte assez de données pour dépasser les 300px de haut, mes 2 div de droite sont bien alignés l'un au dessus de l'autre.
En revanche, si mon div de gauche ne contient pas assez de données, le div bas/droite passe dessous à gauche.
Dans le principe, c'est effectivement logique, mais je ne vois pas comment contourner le problème afin que les 2 div de droite restent bien à droite quelque soit le contenu de celui de gauche.

Pouvez vous m'aider svp ?

[jreaux62]

Bonjour,
montre-nous ton code actuel, stp.

Code :

1
2
3
4
5
6
7
8
9
10
11
<div id="divG" style="float:left; overflow:hidden;">
   ..........
</div>
<div id="divD" style="float:left; overflow:hidden;">
   <div id="div1" style="height:300px;">
      ..........
   </div>
   <div id="div2" style="height:300px;">
      ..........
   </div>
</div>

[Equinoxe5]

Bonsoir,
Voici mon code CSS (dans une feuille séparée)

Le div à gauche est "programme" et les 2 autres sont à droite (quand tout va bien )

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
div#programme{
	float: left;
	margin-top: 2px;
	border: none;
	width: 694px;
	overflow: auto;
	overflow-x: hidden;
}
 
div#photo1{
	float: left;
	height: 300px;
	margin: 2px 0 2px 2px;
	border: 1px solid #ddd;
	width: 300px;
	background-image: url("../images/image1.jpg");
}
 
div#photo2{
	float: left;
	height: 300px;
	margin: 2px 0 2px 2px;
	border: 1px solid #ddd;
	width: 300px;
	background-image: url("../images/image2.jpg");
}

et voici une partie du code de la page

Code :

1
2
3
4
5
<div id="programme"><?php include("$P.php");?></div>
 
<div id="photo1"></div>
 
<div id="photo2"></div>

[jreaux62]

Pour cette configuration :

Code :

1
2
3
4
5
|-----------|-----------|
|           |  photo 1  |
| programme |-----------|
|           |  photo 2  |
|-----------|-----------|

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
#programme {
	float: left;
	margin-top: 2px;
	border: none;
	width: 694px;
	overflow: auto;
	overflow-x: hidden;
}
#colonneD {
	float: left;
	overflow: hidden;
}
#photo1{
	clear: both;
	height: 300px;
	margin: 2px 0 2px 2px;
	border: 1px solid #ddd;
	width: 300px;
	background-image: url("../images/image1.jpg");
}
#photo2{
	clear: both;
	height: 300px;
	margin: 2px 0 2px 2px;
	border: 1px solid #ddd;
	width: 300px;
	background-image: url("../images/image2.jpg");
}

Code :

1
2
3
4
5
6
7
<div id="programme">
	<?php include("$P.php");?>
</div>
<div id="colonneD">
	<div id="photo1">aaaaa</div>
	<div id="photo2">bbbbb</div>
</div>

[Equinoxe5]

Ca fonctionne parfaitement. Je te remercie!