Capa que queda oculta tras el "background" de su contenedor

Valoracion 4 para este artículo
Valoración media
Eva Ríos Sánchez

Eva Ríos Sánchez

Eva pertenece al área de desarrollo web de la compañía MnSoft como desarrollador senior de ésta. Su experiencia en maquetación web con CSS y XHTML le permite participar en el diseño y maquetación de grandes proyectos. Su capacidad para optimizar recursos en complejos diseños es extraordinaria.

En algunas ocasiones podemos necesitar "capas" a las que no queramos definirles un tamaño exacto. Es decir, width:auto; además de una posición relativa position:relative; y un color o imágen de fondo background-color:blue; (por ejemplo).

El problema ocurrió cuando al introducir una "subcapa" que debía poseer un ancho y un alto determinado, width:83px; height:101px; con un color de fondo y un float:left;, ésta quedaba por debajo de su contenedor padre y no era visible.

Podéis probar abriendo en este enlace con diferentes navegadores

ejemplo 1

La solución a este problema fue insertar una nueva declaración en el estilo de la "subcapa", con la propiedad "position" y el valor "relative" (position:relative;), como la que ya poseía su contenedor padre.

Podéis probar la solución abriendo este enlace con diferentes navegadores

Aquí se muestra el código de la solución:

El estilo del "Contenedor":

.content{
background-color:#0075a7;
position:relative;
width:auto;
padding:15px;
}

El estilo del "Subcontenedor" :

.content .subcontent{
width:83px;
height:101px;
background-color:#44c7ff;
float:left; margin-right:10px;
border:1px dashed #fff;
position:relative;
}

Código HTML:

<div class="content">
<p class="subcontent"></p>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisici elit,...
</p>
</div>