Discussion :

[nic2t]

Bonjour Bonjour,

J'espère que tout le monde va bien et que vous pourrez m'apporter un peu d'aide dans ce vendredi 13 !!

J'explique mon problème qui est ridicule mais sur lequel je bloque depuis ce matin...

Je voudrais mettre deux div qui contienne chacune un tableau (des displaytables) cote à cote.

Jusque là pas de problème avec l'attribut float.

Cependant, les longueurs des tableaux étant variables, je veux mettre ces deux div dans un conteneur principal qui aura une couleur de fond : bref rien de compliqué...

Mais lorsque je met mes deux div flottante dans mon conteneur principal, sa hauteur n'englobe pas mes 2 div !

J'imagine que la solution est simple, mais avec mes quelques tests et recherches, je n'ai rien trouvé de probant...
HTML:

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
<div class="displaydiveqt">
 
	<div class="displaytagdiveqt">
 
		<div class="displaytagtitleeqt">
			Liste des EQUIPEMENTS supprimés
		</div>
 
		<table id="EqtSupprTable">
		</table>
 
	</div>
 
	<div class="displaytagdiveqt">
 
		<div class="displaytagtitleeqt">
			Liste des EQUIPEMENTS ajoutés
		</div>
 
		<table id="EqtAjoutTable">
		</table>
 
	</div>
 
 
</div>
</body></html>

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
.displaydiveqt {
	position: relative; /* on positionne le conteneur */
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	background-color: #FFE3B9;
	border: 1px solid #93C9FF;
	padding: 2px;
 
 
}
.displaytagdiveqt {
	position: relative; /* on positionne le conteneur */
	margin-left: auto;
	margin-right: auto;
	width: 49%;
	background-color: #FFE3B9;
	border: 1px solid #93C9FF;
	padding: 2px;
	float : left;
 
}

Cordialement,

Nicolas

[FredPsy]

Bonjour.
Tu mets un un overflow:auto; à ta div conteneur
comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.displaydiveqt {
    position: relative; /* on positionne le conteneur */
    margin-left: auto;
    margin-right: auto;
    width: 80%;
       overflow:auto;
    background-color: #FFE3B9;
    border: 1px solid #93C9FF;
    padding: 2px;
    
    
}

[nic2t]

Alala c'était si simple xD
Ne connaissant pas cette propriété je n'aurais pas pu y arriver de toutes façons

Merci beaucoup

Cordialement,

Nicolas

[FredPsy]

De rien.
Bonne continuation.

[12monkeys]

Bonsoir

Avec en plus le pourquoi du comment : http://css4design.developpez.com/tut...flux-partie-2/