Discussion :

[black-hat]

Bonjour tout le monde je suis en cours de developpement d'un site , mon probleme et le suivant :



c'est la page de test , mais apres avor ajouter du contenu a la div "#connexion"
la page deviens comme cela :s :


et si j'ajoute du contenu a la div "#anonce" elle devien comme ca :s quelqu'un pourrait m'aider a résoudre le probleme et merci

Voici le code CSS de la page :

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
 
#div2 {
	width: 48%;
	border: 1px solid #00F;
	margin-right: 1em;
	border-radius: 1em
 
#div1 {
	width: 46%;
	border: 1px solid #F00;
	margin-right: 1em;
	border-radius: 1em;
 
#anonce {
	border: 1px solid #903;
	overflow: auto;
	margin-right: 1em;
	border-radius: 1em;
}
 
#connexion {
	width: 10em;
	float: left;
	margin-right: 1em;
	margin-left: 1em;
	border: 1px solid #333;
	border-radius: 1em;
	padding-right: 0.313em;
	padding-left: 0.313em;
 
 
#ajout {
	border: 1px solid #CF0;
	width: 10em;
	margin-top: 1em;
	margin-left: 1em;
	padding-right: 0.313em;
	padding-left: 0.313em;
	margin-right: 1em;
	float: left;
	border-radius: 1em;
}

je voudrais lorsqu'il y'aurais du contenu dans la div "#connexion" seul la parti "#ajout " qui se pousse cela est-il possible et merci encore .

et merci infiniment pour votre aide .

[Invité]

Bonjour,
ton code CSS ne nous sert à rien si tu ne montres pas aussi le code html associé (l'imbrication des <div>).

=> Div et CSS : une mise en page rapide et facile

Sur le principe, il faut faire :
-> #colgauche : une colonne à gauche, contenant #connection et #Ajout
-> #coldroite: une colonne à droite, contenant #annonce, #div1 et #div2

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
<div id="colgauche">
	<div id="connecion">
		[...]
	</div>
	<div id="Ajout">
		[...]
	</div>
</div>
 
<div id="coldroite">
	<div id="annonce">
		[...]
	</div>
	<div id="div1">
		[...]
	</div>
	<div id="div2">
		[...]
	</div>
</div>

et le CSS :

Code :

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

1
2
3
4
5
6
7
8
9
#colgauche 	{ float:left; width:25%; }
#coldroite 	{ float:left; width:75%; }
 
  #connection	{ clear:both; width:100%; }
  #Ajout 	{ clear:both; width:100%; }
 
  #annonce	{ clear:both; width:100%; }
  #div1 	{ float:left; width:50%; }
  #div2 	{ float:left; width:50%; }