[SOLUCIONADO] Div no hereda la altura de su contenedor

[mblascog]

Buenas,
Hay una cosa que no entiendo. Supongamos lo siguiente:
<section min-height:500px color:rojo>
<article>
<div>
bla bla bla
</div>
</article
</section>
No debería ver en rojo, como mínimo 500píxeles de altura?

El código es el siguiente:

Código HTML:

<section>
        <article>
            <?php echo $instalacions[$idioma]; ?>
            <div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal11.png"?>' title="<?php echo $columna11[$idioma]; ?>"><img src="../imatges/instal11.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna11[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal12.png"?>' title="<?php echo $columna12[$idioma]; ?>"><img src="../imatges/instal12.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna12[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal13.png"?>' title="<?php echo $columna13[$idioma]; ?>"><img src="../imatges/instal13.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna13[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal14.png"?>' title="<?php echo $columna14[$idioma]; ?>"><img src="../imatges/instal14.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna14[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal21.png"?>' title="<?php echo $columna21[$idioma]; ?>"><img src="../imatges/instal21.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna14[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal22.png"?>' title="<?php echo $columna22[$idioma]; ?>"><img src="../imatges/instal22.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna14[$idioma];?>
                </div>
            </div>
        </article>
        <footer>
            <?php include("includes/inc_peu.php") ?>
        </footer>   
    </section>
 

Y el código CSS este:

Código CSS:

section{clear:both;width:100%;min-height:500px;}
section article{box-sizing:border-box;-moz-box-sizing:border-box;background:lightgray;width:100%;font:0.8em/2.0 'Arial';color:#000;vertical-align:top;text-align:justify;padding:3%;}
section article p{padding-top:2%;}
section article em {font-weight:bold;}
section article div div {box-sizing:border-box;-moz-box-sizing:border-box;float:left;border:1px solid black;padding:0.5%;margin:0.5%;text-align:center;}
 

Y el resultado final:



Es como si el div fuera independiente del section article.

Alguna sugerencia. Gracias

[C2am]

En esta linea está el causante:

Código CSS:

section article div div {box-sizing:border-box;-moz-box-sizing:border-box;float:left;border:1px solid black;padding:0.5%;margin:0.5%;text-align:center;}
 

Aquí la respuesta:
http://librosweb.es/css_avanzado/cap...ar_floats.html

Saludos

[mblascog]

Muchas gracias C2am, tema solucionado, artículo muy bueno.