Como definir un height dinamico

isabelramirezmontoya · #1 (**permalink**) 24/02/2012, 21:03

Buenas noches

Chicos me pueden colaborar con la siguiente duda:

Tengo un contenedor que contiene un par de contenedores uno al lado del otro. Los contenedores internos varian de tamaño razon por la cual requiero que el contenedor principal crezca de forma dimanica en altura cuando los internos crezcan.

El problema es que tengo que marcar en el contenedor principal la propiedad height con un valor fijo ya que cuando lo pongo auto se desaparce.

El codigo que uso es el siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title></title>

<style type="text/css">

#contenedor
{
width: 986px;
margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;
padding: 0;
height: 200px;
background: yellow;
}

.contiene1
{
float: left;
width: 400px;
margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;
padding: 0;
height: auto;
background: blue;
}

.contiene2
{
float: left;
width: 300px;
margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;
padding: 0;
height: auto;
background: red;
}

</style>

</head>

<body>

<div id="contenedor"><div class="contiene1">** ABC **</div><div class="contiene2">** DEF ** </div></div>

</body>
</html>

Gracias por su tiempo

Isabel

jhsilva · #2 (**permalink**) 25/02/2012, 00:54

Agrega al contenedor principal la propiedad:

display: inline-block;

Código CSS:

Ver original#contenedor
{
width: auto;
margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;
height: auto;
background: yellow;
display: inline-block;
}

Mediante el valor inline-block de la propiedad display de css permitirá renderizar el elemento padre de acuerdo a como crezcan sus hijos.

Saludos

ArturoGallegos · #3 (**permalink**) 25/02/2012, 01:11

inline-block? nunca hubiera esperado esa respuesta a este problema, aunque no lo he probado supongo funcionara, pero lo recomendable es limpiar el float ya que es el problema real que tiene.

esto se realiza de dos formas posibles:
Opción 1.- aplicar overflow: hidden o auto al elemento padre (opción recomendada)

Código CSS:

Ver original#contenedor
{
width: 986px;
margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;
padding: 0;
height: 200px;
background: yellow;
overflow:hidden;
}

Opción 2.- aplicar un div vació o algún elemento al final de tu contenido con la propiedad clear: (both, left, right)

Código HTML:

Ver original<div id="contenedor">
   <div class="contiene1">** ABC **</div>
   <div class="contiene2">** DEF ** </div>
   <img src="spacer.gif" style="clear:both;" />
</div>

isabelramirezmontoya · #4 (**permalink**) 25/02/2012, 17:03

Mil gracias por su tiempo y colaboracion

Logre solucionarlo agregando la linea display: inline-block; quedo perfecto, probe las otras opciones pero no me funciono, no tuvo ningun efecto.

Muchas gracias

Isabel

jhsilva · #5 (**permalink**) 25/02/2012, 18:28

Cita:

Iniciado por Ag666

inline-block? nunca hubiera esperado esa respuesta a este problema, aunque no lo he probado supongo funcionara, pero lo recomendable es limpiar el float ya que es el problema real que tiene.

esto se realiza de dos formas posibles:
Opción 1.- aplicar overflow: hidden o auto al elemento padre (opción recomendada)

Código CSS:

Ver original#contenedor
{
width: 986px;
margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;
padding: 0;
height: 200px;
background: yellow;
overflow:hidden;
}

Opción 2.- aplicar un div vació o algún elemento al final de tu contenido con la propiedad clear: (both, left, right)

Código HTML:

Ver original<div id="contenedor">
   <div class="contiene1">** ABC **</div>
   <div class="contiene2">** DEF ** </div>
   <img src="spacer.gif" style="clear:both;" />
</div>

Estimado podrìas complementar la opción para aclarar ello porfavor.

¿Que realiza clear:both? Lo he visto varias veces maquetando e infiero que es para limpiar el contenido , pero tecnicamente que se logra.

Saludos y atento