Discussion :

[KneXtasY]

Bonjour,

je débute en XHTML/CSS et a force de bidouiller, j'ai réussi à obtenir ce que je voulais.
C'est a dire, un conteneur avec deux colonnes sans utiliser de tableaux.

Mais le problème, c'est que je ne comprends pas trop le fonctionnement.

Voici ma feuille :

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
 
div.conteneur {
margin-left: auto;
margin-right: auto;
text-align: left; 
background-color: white;
padding: 16px;
width: 790;
border: 2px dashed #ff6600;
}
 
div.right {
background-color: white;
text-align: right; 
border: 2px dashed #ff6600;
}
 
div.left { 
float: left;
background-color: white;
float: left;
border: 2px dashed #ff6600;
}

Et une partie du code de ma 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
 
 
<div class="conteneur">
 
<div class="left">
<b>Prénom Nom</b><BR>
XX ans, Français, Célibataire<BR><BR>
Titulaire du permis B<BR>
...
</div>
 
<div class="right">
Adresse	<BR>
Code Postal Ville<BR><BR>
Telephone : ... <BR>
...
</div>
 
</div>

La division gauche se place bien dans la partie gauche du conteneur.
La division droite se place à la suite de la division gauche.

Pourquoi la division de droite s'élargit t-elle pour remplir la longueur du conteneur ?
Est ce que ma "méthode" est correcte ?
Si je veux rajouter des colonnes, comment dois-je m'y prendre ?



Merci d'avance.

[SpaceFrog]

Code :

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

1
2
3
<div class="col1" style="width:33%;height:100%;float:left;border:solid 1px;">&nbsp;</div>
<div class="col1" style="width:33%;height:100%;float:left;border:solid 1px;">&nbsp;</div>
<div class="col1" style="width:33%;height:100%;float:left;border:solid 1px;">&nbsp;</div>

[KneXtasY]

Il suffit de mettre float: left; à chaque <div> pour ajouter à la suite.
Je n'avais pas pensé au poucentage.

Merci beaucoup !