Un <div><hr></div> de hauteur nulle.

Bonsoir,

Je revois un gabarit de mise en page qui me sert à faire tous mes sites, dont la structure est la suivante : un bloc <div id="global"> centré sur la page contenant un texte (<p>) suivi d'une liste non ordonnée (<ul><li><img />) de 3 images placées les unes à côté des autres (donc en float:left).

Pour rétablir le flux de ce bloc je place un <hr> entouré d'un <div class="fermeture">, ces deux éléments étant en clear:both;

Tous les padding du bas sont réglés à 0, de sorte que la liste d'images se "colle" au bord inférieur du bloc global.

Mais en voyant ma CSS, je constate que j'ai réglé la <div class="fermeture"> à une hauteur (height) de 15px et pourtant la liste d'images reste toujours collée en bas du bloc <div id="global">.

Voici le code pour simplifier mon explication :

<div id="global">
  <p>Bienvenue sur mon site</p>
  <ul>
    <li style="float:left;"><a><img /></a></li>
    <li style="float:left;"><a><img /></a></li>
    <li style="float:left;"><a><img /></a></li>
  </ul>
  <div style="clear:both;height:15px;overflow:hidden;"><hr style="clear:both;" /></div>
</div>
</div>

Je voudrais juste comprendre pourquoi un tel comportement (même si c'est effectivement ce que je peux attendre)
Modifié par darkstar2023 (23 Nov 2010 - 17:45)

Hello,

Tu sais qu'il y a plus simple pour rétablir le flux que ce... truc que tu as fait ?

<div id="global"> 
  <p>Bienvenue sur mon site</p> 
  <ul style="overflow:hidden"> 
    <li style="float:left;"><a><img /></a></li> 
    <li style="float:left;"><a><img /></a></li> 
    <li style="float:left;"><a><img /></a></li> 
  </ul> 
</div> 

Au passage tu as une fermeture de <div> en trop, sûrement la faute au c/c.

Sinon chez moi les 15px de hauteur de ton spacer sont bien pris en compte, le contraire aurait été étonnant.
Modifié par BeliG (23 Nov 2010 - 17:53)

Ce qui m'étonne c'est surtout le fait que le spacer (qui rétablit pourtant le flux) se superpose sur la liste <ul> située juste au dessus. Et donc que le bloc global qui contient le tout, se termine visuellement juste après la liste, ne laissant aucune place à ce "spacer".*

Je me pose juste la question car ce comportement m'étonne, même si visuellement mon site s'affiche comme je le désire, du moins de mon côté (Chrome, FF 3.6, IE8 et même IE6 !!)

PS. je ne comprends pas le code que tu proposes. Il aurait pour effet de cacher les images ?
Modifié par darkstar2023 (23 Nov 2010 - 23:29)