Hauteur d'une div remplie de <a><img ... /></a>

Hello,

Comprendre le comportement de float implique une compréhension plus globale de la philosophie des CSS, notamment celle du flux. Les éléments de type inline (b, i, span,...), sont affichés les uns à la suite des autres, tandis que les éléments de type block (p, div, img, ...), amènent un retour à la ligne après leur affichage. Le flux fait en sorte que ces éléments s'affichent naturellement, les uns à la suite des autres, en respectant les spécificités de chaque type.

Le float permet de sortir un élément du flux. L'element n'étant plus dans le flux les elements suivant vont se caler sur les derniers elements étant encore dans le flux.

Dans ton cas, tu as mis les elements a en float, ce qui les as fait sortir du flux. Il n'y avait plus de hauteur spécifié à l'intérieur de .block, donc la hauteur de .block vaux 0.

La propriété overflow spécifie ce qui se passe si le contenu déborde du block. Ce qui fait un reset du flux.

Je te conseille de :

• suppprimer ton float: left et de la remplacer par un display: inline-block;
• ou de supprimer ton overflow:hidden; et d'utiliser un clear: left | right | both. Le clear permet de fait un reset du flux.

Micro clearfix hack

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

voila, voila,

bonne continuation.

@Amstramgram :
Merci beaucoup pour ton aide, elle m'a été très précieuse !

J'ai réécrit mon code en sass/compass, cela fonctionne parfaitement :)

Le HTML :

<div class="grid">
    <img src="http://placekitten.com/g/300/300" alt="">
    <img src="http://placekitten.com/g/300/300" alt="">
    <img src="http://placekitten.com/g/300/300" alt="">
    <img src="http://placekitten.com/g/300/300" alt="">
    <img src="http://placekitten.com/g/300/300" alt="">
    <img src="http://placekitten.com/g/300/300" alt="">
    <img src="http://placekitten.com/g/300/300" alt="">
    <img src="http://placekitten.com/g/300/300" alt="">
</div>

Le SCSS :

@import "compass";

html { min-width: 150px; }

.grid { 
    background: lighten(black, 30%);
    padding: 5px;
    @include clearfix();

    img {
        float: left;
        margin: 5px;
        width: calc(100% * 1/4 - 10px);

        @media (max-width: 900px) { width: calc(100% * 1/3 - 10px) };
        @media (max-width: 600px) { width: calc(100% * 1/2 - 10px) };
        @media (max-width: 400px) { width: calc(100% - 10px) };
    }
}

Le Codepen se trouve ici pour les intéressés : CSS calc()

Cordialement, Brice.