Discussion :

[Coussati]

bonjour

en cherchant comment aligner des bloc je suis tombé sur cette page :

http://www.developpez.net/forums/d85...-div-l-cote-l/

les explications de xess91 m’avaient l'air claires et sympa, mais après plusieurs tests ça ne fonctionne pas chez moi : le dernier bloc n'est pas sur la même ligne

j'ai carrément essayé sur une page vierge, en copiant collant son code :

Code html :

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
<div style="width:600px;" class="premier">
 
<!--première ligne-->
<div>
     <div style="float:left;width:320px;">block1</div>
     <div style="float:left;width:320px;margin-left:320px;">block2</div>
     <div style="width:320px;margin-left:640px;">block3</div>
</div>
<!--deuxième ligne en argument de la propriété clear tu peux mettre left aussi-->
<div style="clear:both;">
     <div style="float:left;width:320px;">block1</div>
     <div style="float:left;width:320px;margin-left:320px;">block2</div>
     <div style="width:320px;margin-left:640px;">block3</div>
</div>
 
<div style="width:300px;" class="article_bas">

j'ai juste rajouté le 1er conteneur

auriez vous une idée ?

merci

[Jacques Beauregard]

Normal : si je reprends ton code pour afficher la première ligne :

Code html :

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

1
2
3
4
5
6
<!--première ligne-->
<div>
     <div style="float:left;width:320px;">block1</div>
     <div style="float:left;width:320px;margin-left:320px;">block2</div>
     <div style="width:320px;margin-left:640px;">block3</div>
</div>

ton 3e div a une largeur de 320 px et une marge sur la gauche de 640 px . ce qui donne une largeur totale de 960 px !
donc ce div saute une ligne car il occupe trop de place

[NoSmoking]

Bonjour,
de plus ils servent à quoi les margin-left sur tes élément flottants ?

[Invité]

Bonjour,
il est préférable ici de mettre les largeurs en % :

Code html :

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

1
2
3
4
5
<div class="conteneur">
     <div class="Box-x3">block1</div>
     <div class="Box-x3">block2</div>
     <div class="Box-x3">block3</div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.conteneur {
  width:1000px;
  border:1px solid grey;/*test*/
  overflow:hidden;
}
.Box-x3 {
  float:left;
  width:31.33%;
  margin:1%;
  padding:0;
  box-shadow:0px 0px 1px green;/*test*/
}

[Coussati]

merci à vous tous


jreaux62 ton code fonctionne bien


Francois2688 je ne pense pas que ce soit un problème de largeur car j'ai changé, en mettant le bloc conteneur une plus grande

en plus j'ai remarqué que si je rajoute un 4 ème bloc le 3 ème est bien placé, et donc le problème provient du dernier bloc


NoSmoking je pense pour espacer chaqune bloc