Discussion :

[vasilov]

Bonjour,

je sis entrain de mettre en place une page. Voici sa structure :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="a">
   <div id="a1">
   </div>
   <div id="a2">
   </div>
</div>
 
<div id="b">
</div>

le div a est le conteneur de a1 et a2.
J'aimerais mettre a1 à gauche de a2. Pour cela : j'ai utilisé float:right; pour a1 et float:left; pour a2. Cependant je suis obligé de définir les largeurs ce qui ne me plait pas.

Ensuite, le div b ce positionne par dessus le div a et non en dessous. Je ne comprend pas pourquoi.

Merci de votre aide pour résoudre ce problème.

[mick8569]

Essaye ceci :

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
 
.a {
  width: 100%;
  overflow: auto;
}
 
.a1 {
  float: left;
  width: 40px; 
}
 
.a2 {
  margin-left: 45px;
}
 
.b {
  clear: both;
}

Je n'ai pas testé mais de mémoire, tu devrais arriver à avoir quelque chose de pas trop mal.

[vasilov]

Merci, c'est niquel.
Je ne connaissais pas

Code :

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

 clear: both;

Par contre, j'aurais voulu éviter

Code :

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

1
2
3
4
5
6
7
8
.a1 {
  float: left;
  width: 40px; 
}
 
.a2 {
  margin-left: 45px;
}

pour mettre quelque chose dans le genre :

Code :

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

1
2
3
4
5
6
7
8
9
.a1 {
  float: left;
  width: TOUT LE RESTE ; 
}
 
.a2 {
  float: right;
  width: 40px; 
}

Je ne sais pas comment exprimer :
width: TOUT LE RESTE ;

[Shaidak]

Bonjour,

Je n'ai peut-être pas très bien compris mais tu n'as qu'à utiliser ce qui a été dit plus haut : width: 100%;

[vasilov]

en fait, si je fais :

Code :

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

1
2
3
4
.a1 {
  float: left;
  width: 100px; 
}

alors ils prendra toute la largeur et le div a2 sera situé sous a1 (à droite)
Donc cela ne passe pas.

en fait il faudrait faire un width: 100%-55px; Mais je ne sais pas comment l'exprimer

[mick8569]

Attention, tu ne dois mettre la propriété float que sur un seul div dans ton cas.
Pour ton width=LE RESTE, tu peux l'exprimer avec un margin et sans mettre de propriété width à ton div.
Si je comprends bien ce que tu veux faire, tu devrais avoir quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
 
.a2 {
    width: 50px;
    float: right;
}
.a1 {
    margin-right: 55px;
}

[vasilov]

Attention, tu ne dois mettre la propriété float que sur un seul div dans ton cas.
Pour ton width=LE RESTE, tu peux l'exprimer avec un margin et sans mettre de propriété width à ton div.
Si je comprends bien ce que tu veux faire, tu devrais avoir quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
 
.a2 {
    width: 50px;
    float: right;
}
.a1 {
    margin-right: 55px;
}

Lorsque je fais ceci, je me retrouve avec a2 qui passe sous a1 et donc ne reste pas à coté.

J'obtien un résultat suffisant avec :

Code :

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

1
2
3
4
5
6
7
8
9
.a1 {
  float: left;
  width: 60%; 
}
 
.a2 {
  float: right;
  width: 40px; 
}

Donc ca ira comme ca.
Merci pour votre aide.