Forum d'entraide PHPFrance

Bonjour ami-es développeur-ses

J'ai une petite question que je n'arrive pas à résoudre.

en css, j'ai ceci :

#content {
width: 930px;
}

.bloc{
width: 300px;
height:460px;
float: left;
margin-top:20px;
margin-left:10px;
}

.pagination{
width: 100%;
}

en html

<div id="content">

<div class="bloc">actu 1</div>
<div class="bloc">actu 2</div>
<div class="bloc">actu 3</div>

<div class="pagination">numéro de pagination</div>

</div>

Tout fonctionne quand j'ai un multiple de 3 dans mes actus.
J'ai bien la class "pagination" en dessous des actus.

Mais si par exemple, j'ai

<div id="content">

<div class="bloc">actu 1</div>
<div class="bloc">actu 2</div>
<div class="bloc">actu 3</div>
<div class="bloc">actu 4</div>

<div class="pagination">numéro de pagination</div>

</div>

J'ai essayé en mettant un display:block sur "pagination" sans succès.

La classe pagination ne se met pas en dessous des actus mais à coté, dans le vide laissé par les 2 actus manquantes (vu qu'il faut un multiple de 3) dans mon exemple.

Comment faire pour que la classe pagination se mette quoiqu'il arrive en dessous de tous les blocs d'actu indépendamment de leurs nombres?

Merci.

Salut,

Le problème vient du fait que les blocs soient positionnés en float. Une solution possible est d'englober les div flottants dans un parent avec une classe utilitaire clearfix, par exemple :
css

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html

<div class="clearfix">
  <div class="bloc">actu 1</div>
  <div class="bloc">actu 2</div>
  <div class="bloc">actu 3</div>
  <div class="bloc">actu 4</div>
</div>

D'autres solutions possibles seraient de remplacer l'utilisation des float par display: inline-block (attention aux espaces entre les blocs avec inline-block) ou mieux avec flexbox.

Bonne journée,

bonjour,

Merci beaucoup. Cela fonctionne à merveille.

Bonne journée.