HTML/CSS - Aligner plusieurs div les un à coté des autres

D

Daniel.Dev

Membre
Inscription
29 Novembre 2016
Messages
160
Réactions
90
Points
1 566
RGCoins
0
8cWlinp.png

Bonjour tout le monde, aujourd'hui on se retrouve sur un petit tutoriel HTML/CSS pour aligner plusieurs div les un à coté des autres.

T'es prêt ? C'est partie :) !

Commençons par le HTML !
HTML: 
<div id="container">
    <div class="coller">
    </div>
 
    <div class="coller">
    </div>

  <div class="clear"></div>
</div>

Nous créons une div #container qui contiendra deux div .coller côte à côte.

Voilà le CSS :
Code: 
#container {
  background-color: #FF0000;
  padding: 20px;
  width: 90%;
  height: auto;
}

.coller {
  width: 45%;
  float: left;
  height: 120px;
  background-color: #FFF;
  border: 1px solid #000;
  margin-right: 20px;
}

.clear {
  clear: both;
}

Nous mettons notre div #container avec un fond rouge pour mieux voir ce qu'il se passe.
Pour notre div .coller, nous utilisons la propriété float qui permet d'aligner plusieurs div entre elles, tout simplement.
Et on oublie pas la div .clear, qui permet à la div #container de se redimensionner correctement avec les div flottant qui s'y trouvent.

Voici le code final :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
 
W

webman2o

Membre
Inscription
8 Avril 2017
Messages
13
Réactions
4
Points
5 056
RGCoins
0
pas mal je savais pas cette astuce ^^ merci
 
L

Lebossdu33

Premium
Inscription
2 Avril 2017
Messages
658
Réactions
111
Points
1 006
RGCoins
0
✎ Daniel a dit:
8cWlinp.png

Bonjour tout le monde, aujourd'hui on se retrouve sur un petit tutoriel HTML/CSS pour aligner plusieurs div les un à coté des autres.

T'es prêt ? C'est partie :) !

Commençons par le HTML !
HTML: 
<div id="container">
    <div class="coller">
    </div>
 
    <div class="coller">
    </div>

  <div class="clear"></div>
</div>

Nous créons une div #container qui contiendra deux div .coller côte à côte.

Voilà le CSS :
Code: 
#container {
  background-color: #FF0000;
  padding: 20px;
  width: 90%;
  height: auto;
}

.coller {
  width: 45%;
  float: left;
  height: 120px;
  background-color: #FFF;
  border: 1px solid #000;
  margin-right: 20px;
}

.clear {
  clear: both;
}

Nous mettons notre div #container avec un fond rouge pour mieux voir ce qu'il se passe.
Pour notre div .coller, nous utilisons la propriété float qui permet d'aligner plusieurs div entre elles, tout simplement.
Et on oublie pas la div .clear, qui permet à la div #container de se redimensionner correctement avec les div flottant qui s'y trouvent.

Voici le code final :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Cliquez pour agrandir...
merci de ton aide pour ce petit cour
 
Haut