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
25
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.
 
pas mal je savais pas cette astuce ^^ merci
 
✎ 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
 
Retour
Haut