Répondu
Bonjour, je conçois une page web et après avoir créé un DIV pour y ajouter du texte, je me demande comment le diviser en 3 colonnes. Merci d’avance pour vos réponses.
Meilleure réponse
Salut Videl,
Nous allons créer un ID appelé ‘col‘ pour notre DIV principal. On pourrais aussi bien lui donner un autre nom, c’est un choix (éviter quand même le nom qui commencent par un chiffre) 😉
Pour chaque colonne, on a la taille du grand DIV divisée par 3 à laquelle on retire les valeurs du MARGIN.
<!DOCTYPE html>
<html>
<head>
<!-- Debut code CSS -->
<style>
body{
width: 100%;
}
#col{
display:block; position:relative;
width:900px;
height:200px;
}
#col ul{
display: block;
width: 100%;
padding:0px
}
#col ul li{
display: inline-block;
width: 30% ;
margin-left: 1%;
margin-right: 1%;
}
</style>
<!-- Fin code CSS -->
</head>
<body>
<!-- Debut bloc de texte -->
<div id="col">
<!-- Debut colonnes -->
<ul>
<li>Voici ma première colonne</li>
<li>Voici ma deuxième colonne</li>
<li>Voici ma troisième colonne</li>
</ul>
<!-- Fin colonnes -->
</div>
<!-- Fin bloc de texte -->
</body>
</html>
