adaptar contenedor al contenido

Adler · #1 (**permalink**) 31/03/2011, 15:42

Hola, panda. Bueno, pues eso. ¿Como adaptar un bloque div, que contiene a su vez otros dos bloques, a su contenido?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<style type="text/css">
.contenedor {
background-color: green;
margin: 0 auto -1em;
overflow: hidden;
width:50%;
}
 
.contenido {
background-color: yellow;
float: left;
padding: 0 20px;
}
</style>
</head>
<body>
 
     <div class="contenedor">
 
             <div class="contenido">
              contenido
             </div>
 
             <div class="contenido">
             contenido
             </div>
 
      </div>
 
</body>
</html>

Gracias

GatoGordo · #2 (**permalink**) 31/03/2011, 15:51

Hola, ¿a qué te refieres con adaptar? Al ponerle el atributo float:(left o right)a tus bloques div estos se van acomodando a la izquierda o a la derecha. Estaría bien explicar más tu objetivo.

Saludos!

GAST0N · #3 (**permalink**) 31/03/2011, 15:52

no entiendo tu pregunta

Adler · #4 (**permalink**) 31/03/2011, 16:25

Hola

Bien, reformulo la pregunta ¿Como adaptar el largo del contenedor verde a la suma de los dos contenedores amarillos?. Ahora, el contenedor verde, toma el 50% del largo del contenedor rojo. Probad con este otro código

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<style type="text/css">
#rojo {
background-color: red;
margin: 0 auto -1em;
overflow: hidden;
width: 80%;
height: 100px;;
}
 
.contenedor {
background-color: green;
margin: 0 auto -1em;
overflow: hidden;
width:50%;
}
 
.contenido {
background-color: yellow;
float: left;
padding: 0 20px;
}
</style>
</head>
<body>
<div id="rojo">
 
     <div class="contenedor">
 
             <div class="contenido">
              contenido
             </div>
 
             <div class="contenido">
             contenido
             </div>
 
      </div>
 
</div>
</body>
</html>

Se trata de trabajar con la propiedad width, min-width o max-width. Pero da igual el valor que ponga a estas propiedades que no hay manera. Si le pones auto, toma el 100%, .....

Venga, gracias

kseso? · #5 (**permalink**) 31/03/2011, 17:45

Hola Alder.

Creo que deberías contarnos qué buscas lograr y el porqué. No un caso hipotético, sino el concreto que te tragas entre manos para ver si se puede simular ese comportamiento.
Tal como lo planteas no veo cómo ahora, es demasiado tarde por aquí.

Adler · #6 (**permalink**) 01/04/2011, 07:51

@kseso?, que tal?

Estas imágenes lo aclararán

Esto es lo que obtengo hasta ahora

y esto es lo que quiero conseguir

Como veréis se trata de centrar los div's (tablas) al contenedor verde.

Un código algo más elabarado

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
 
html, body  {
width: 100%;
background-color: #FFF;
margin: 0; 
}
 
#principal_cont {
text-align: center;
min-height: 100%;
height: auto !important;
max-width: 84%;
margin: 0 auto;
}
 
 
#desarrollo_tema {
background-color: red;
border: 1px solid #B6B6B6; 
color: #000000;
font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 10px 10px 3px 25px;
text-align: left;
margin-top: 60px;
}   
 
 
.contenedor_tabla {
background-color: green;
margin: 0 auto;
overflow: hidden;
width: 100%;
}
 
.tabla {
float: left;
padding: 20px;
}
 
 
.tabla table {
background-color: #C9C9C9;
width: 100%;
padding: 0;
}
 
.tabla thead th {
background-color: #EEE;
color: #000000;
}
 
.tabla thead td {
background-color: #F5F5F5;
color: #696969;
}
 
.tabla tbody td {
background-color: #FFF;
color:  #000000;
font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: left;
padding: 3px 7px;
}
 
.tabla tbody i {
color: #696969;
}
 
.tabla tfoot {
background-color: #FFF;
}
 
.tabla thead th, .tabla thead td {
font: bold 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: center;
padding: 3px 7px;
}
</style>
</head>
<body>
<div id="principal_cont"> 
 
<div id="desarrollo_tema">
 
 
<div class="contenedor_tabla ">
 
 
<div class="tabla">
<table cellspacing="1px">
<thead>
<tr>
<th colspan="2">Listado</th>
</tr>
<tr>
<td>Producto</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td><b>Producto1</b></td>
<td>15</td>
</tr><tr>
<td><b>Producto2</b></td>
<td>40</td>
</tr><tr>
<td><b>Producto3</b></td>
<td>30</td>
</tr><tr>
<td><b>Producto</b></td>
<td>2</td>
</tr><tr>
<td><b>Producto4</b></td>
<td>98</td>
</tr><tr>
<td><b>Producto5</b></td>
<td>4</td>
</tr><tr>
<td><b>Producto6</b></td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
 
 
<div class="tabla">
<table cellspacing="1px">
<thead>
<tr>
<th colspan="2">Listado</th>
</tr>
<tr>
<td>Producto</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td><b>Producto1</b></td>
<td>15</td>
</tr><tr>
<td><b>Producto2</b></td>
<td>40</td>
</tr><tr>
<td><b>Producto3</b></td>
<td>30</td>
</tr><tr>
<td><b>Producto</b></td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
 
 
</div>
 
 
 
</div>
 
 
</div>
</body>
</html>

Gracias

kseso? · #7 (**permalink**) 01/04/2011, 08:06

Ahora sí pille lo que quiere lograr.
Voy con prisa que ya me han dado el tercer aviso, así que estoy enfriando filamentos.

Pruebe a ve si este ejemplo (no está hecho a propósito, ya lo tenía realizado) le sirve:
http://css.devillasbuenas.es/alineacion_multiple.html

Como verá, lo que se consigue es un centrado de las cajas en su contenedor padre sin importar o conocer a priori su número o su anchura.

Si necesita más lo comenta y ya vamos viendo.

GatoGordo · #8 (**permalink**) 01/04/2011, 10:43

¿Has probado centrarlos de la misma manera que centras el contenerdor principal? con

Código CSS:

Ver originalmargin: 0 auto;

Se van a la izquierda porque tienes float:left, ese podrías quitarlo.

Saludos!

Adler · #9 (**permalink**) 01/04/2011, 16:28

Hola

Cita:

Iniciado por GatoGordo

¿Has probado centrarlos de la misma manera que centras el contenerdor principal? con

Código CSS:

Ver originalmargin: 0 auto;

No es la solución, puede haber 1, 2, 3, n bloques. Y aunque solo hubiese uno, no funcionaría, ya lo probé

Cita:

Iniciado por GatoGordo

Se van a la izquierda porque tienes float:left, ese podrías quitarlo.

Saludos!

Ahora creo que sí puedo quitar la propiedad float, por que creo que la solución, por lo que he visto, es adaptar lo que me propone @kseso?. Es decir usar otro contenedor y en sus hijos usar display: inline-block, que por cierto no conocía ese valor. Tal vez deje de leer cuando llegué a inline

Gracias por vuestro tiempo