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

Daniel.Dev

Membre
Inscription
29 Novembre 2016
Messages
123
Réactions
83
Points
756
    Réponse de Daniel.Dev Forums généraux Informatique ⌨️ Programmation Programmation web : HTML/CSS - Aligner plusieurs div les un à coté des autres
  • #1

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 vous inscrire ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)
 

webman2o

Membre
Inscription
8 Avril 2017
Messages
13
Réactions
4
Points
546
    Réponse de webman2o Forums généraux Informatique ⌨️ Programmation Programmation web : HTML/CSS - Aligner plusieurs div les un à coté des autres
  • #2
pas mal je savais pas cette astuce ^^ merci
 

Lebossdu33

Membre Premium
Premium
Inscription
2 Avril 2017
Messages
662
Réactions
108
Points
1 006
    Réponse de Lebossdu33 Forums généraux Informatique ⌨️ Programmation Programmation web : HTML/CSS - Aligner plusieurs div les un à coté des autres
  • #3

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 vous inscrire ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)
merci de ton aide pour ce petit cour
 


Votre adresse email ne sera pas visible publiquement. Nous ne l'utiliserons que pour confirmer votre message.
Haut