Existen problemas cuando se está armando con capas y css una web, ya que muchas veces necesitamos tener una columna a la izquierda de la otra. Para lograr esto, necesitamos poner los tamaños de anchos exactos para que no se mueva para abajo la capa que debe estar al costado, pero también se debe trabajar con una capa contenedora y esto es lo que a muchos les trae problemas cuando el alto de la capa  (height) es dinámico.
Para solucionar este inconveniente siempre debemos tener una capa contenedora, pero como no sabemos el alto que ésta debe tener, le debemos de poner

<style type="text/css">
div.contenedor{
     display: inline-block;
}
</style>

Así, la capa crecerá en base a las capas que estén adentro, aunque estas tengan la propiedad “float”. Veamos un ejemplo

<style type="text/css">
div.contenedor{
	width: 450px;
	background-color: #000000;
	padding: 5px;
}
div.contenedor div.izquierda{
	float: left;
	width: 150px;
	background-color: #FF0000;
	margin-right: 10px:;
}
div.contenedor div.centro{
	float: left;
	width: 280px;
	background-color: #0000FF;
}
</style>

Por cierto, ven que utiizo herencia de capas, si no están muy familiarizados con el armado de CSS vean este link para armar sus página webs con CSS y DIVs

<div class="contenedor">
     <div class="izquierda">
     <p>Izquierda</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     </div>
     <div class="centro">
     <p>Centro</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     </div>
</div>

Al final van a ver que obtendrán este resultado, el cual no quieren:

Pero si le agregan el atributo display al estilo “contenedor”, tendrán justamente lo que necesitan, que la capa contenedor crezca verticalmente como las que están dentro de él:

<style type="text/css">
div.contenedor{
	width: 450px;
	background-color: #000000;
	padding: 5px;
	display: inline-block;
}
</style>

Aquí está lo que quieren

¿Qué les pareció? ¿Les sirvió?

Be Sociable, Share!