Discussion :

[yo_haha]

Bonsoir,

Je voudrais savoir comment faire que trois blocs div soient en disposition horizontale l'un à coté de l'autre. En fait, je veux disposer ma page d'accueil en 6 petits blocs div.

[xess91]

Salut yo_haha,

pour avoir trois éléments de type block l'un à coté de l'autre tu as deux solutions.

La première consite à utiliser des div en float left :

Code :

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

1
2
 
<div style="float:left;" id="div1"></div><div style="float:left;" id="div2"></div><div id="div3"></div>

Dans cet exemple tu devras rajouter des dimensions en largeur à tes divs et rajouter un margin-left à la div2 de la valeur de la largeur de la div1 et aussi a la div3 de la valeur de la largeur de la div1 et de la div2.

De plus tu devras aussi utiliser la propriété "clear" en css pour ton deuxième ensemble de div.

Script complet:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!--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>

Et la deuxième solution et d'utiliser une table avec comme argument à mettre dans les "td" align=left et valign=top.

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
 
<table>
<!--ligne 1 -->
     <tr>
          <td align="left" valign="top">block1</td>
          <td align="left" valign="top">block2</td>
          <td align="left" valign="top">block3</td>
     </tr>
<!--ligne 2-->
     <tr>
          <td align="left" valign="top">block1</td>
          <td align="left" valign="top">block2</td>
          <td align="left" valign="top">block3</td>
     </tr>
</table>

[sebhm]

Bonjour,

+1 pour la premiere solution (avec les float)

-10 pour la seconde : ca s'appelle de la mise en page par tableau et c'est à banir (meme si ca marche )

sinon, il y a d'autres solutions comme la modification du type d'affichage :

Code :

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

display : inline

mais la premiere solution est tres bien

[the-destroyer]

yo a tous!

essaye:

Code :

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

1
2
3
4
 
<div style="float:left;" >block 1</div>
<div style="display : block" >block 2</div>
<div style="float:right;" >block 3</div>

c'est ce que je fais et ca marche au poil a toi de me dire si pour toi aussi!

@+

[sebhm]

bonjour,

aucune chance que ca marche.

Il faut que tu mettes le bloc en

Code :

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

float:right

avant le block en positionnement normal :

Code :

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

display : block

ce CSS n'a d'ailleurs pas d'interêt puisque c'est le fonctionnement par defaut.

[yo_haha]

Merci à tous. Pour la première solution proposée pourquoi mettre un

Code :

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

clear: both

à la deuxième ligne ?