Le Blog du Geek Joyeux

Plus moins vite tu codes, moins plus vite ça plante

Comment se passer de <div class="clear"></div> ?

| Commentaires

Dans mon travail de tous les jours, en tant que développeur web, je me retrouve confronté au problème dit de la guillotine lorsque j’utilise des éléments en float.

Pour illustrer mes propos voici un petit exemple de code et son résultat :

Code xHTML :

1
2
3
4
<div id="container">
  <div class="content"></div>
  <div class="content"></div>
</div>

Code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
#container {
  border:       1px solid #000000;
  padding:      10px;
}

.content {
  background:   #999;
  float:        left;
  height:       100px;
  width:        100px;
  margin-right: 10px;
}

Voici le résultat obtenu :

Float with problem

En effet, dans 99% des cas, ce n’était pas le but recherché.

Pour corriger ce comportement il existe plusieurs solutions. La seule que je connaissais jusqu’à maintenant était la technique de la div clear.

Technique de la div clear

Cette technique consiste à ajouter une div ayant pour particularité d’avoir la propriété CSS clear: both;.

Code xHTML :

1
2
3
4
5
<div id="container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="clear"></div>
</div>

Code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container {
  border:       1px solid #000000;
  padding:      10px;
}

.content {
  background:   #999;
  float:        left;
  height:       100px;
  width:        100px;
  margin-right: 10px;
}

.clear {
  clear: both;
}

Voici le résultat :

Float with no problem

Cette solution permet d’obtenir le résultat voulu mais un souci subsiste, l’utilisation d’une balise présente uniquement pour le style.
C’est mal !

Voici donc une solution purement CSS se basant sur l’utilisation de la propriété overflow.

La technique Overflow

Pour cette technique il suffit simplement d’ajouter la propriété overflow: hidden sur le conteneur.

Edit: Attention ! Pensez à préciser une width, sinon la technique risque de ne pas marcher sous certains navigateurs !

Code xHTML :

1
2
3
4
<div id="container">
  <div class="content"></div>
  <div class="content"></div>
</div>

Code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container {
  border:       1px solid #000000;
  padding:      10px;
  overflow:     hidden;
  width:        100%;
}

.content {
  background:   #999;
  float:        left;
  height:       100px;
  width:        100px;
  margin-right: 10px;
}

Le résultat est le même mais le code HTML reste cantoné au strict minimum ;).

Float with no problem

Enjoy !

Commentaires