Foros del Web » Creando para Internet » CSS »

Que un div crezca de acuerdo a su contenido

Estas en el tema de Que un div crezca de acuerdo a su contenido en el foro de CSS en Foros del Web. Saludos, quiero hacer una pagina con cabecera, cuerpo y pie, todo esta chevere, pero cuando meto contenido en el div del cuerpo este no crece. ...
  #1 (permalink)  
Antiguo 27/04/2009, 16:49
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Que un div crezca de acuerdo a su contenido

Saludos, quiero hacer una pagina con cabecera, cuerpo y pie, todo esta chevere, pero cuando meto contenido en el div del cuerpo este no crece.

El div del cuerpo tiene la propiedad height en auto.

Pero no crece de acuerdo al contenido que se le mete, al final todo el contenido pasa por encima del pie.

Espero que me puedan ayudar.

Gracias.
__________________
El aprendiz.
  #2 (permalink)  
Antiguo 27/04/2009, 17:10
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.740
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Que un div crezca de acuerdo a su contenido

El comportamiento por default de los divs es adaptarse al contenido, por lo que no necesitas height:auto;

Dentro del div de contenido hay elementos flotantes (float)?

Si es asi, agrega otro div dentro de "contenido" antes de cerrarlo:

Código html:
Ver original
  1. <div id="contenido">
  2.     <!-- Aqui va tu contenido flotante -->
  3.     <div class="corte"></div>
  4. </div>

En el css:
Código css:
Ver original
  1. div.corte {
  2.     clear:bloth; /* Limpia flotantes de derecha e izquierda, puedes usar left o right, dependiendo de los elementos que tengas flotantes */
  3. }

Si tienes posiciones absolutas o relativas habria que ver tu codigo.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 27/04/2009, 17:25
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Respuesta: Que un div crezca de acuerdo a su contenido

Lo puse como tu dices, pero nada:

este es mi css:
Código css:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. a {
  5.     cursor: pointer;
  6. }
  7.  
  8. html, body {
  9.     width: 100&#37;;
  10.     height: 100%;
  11. }
  12.  
  13. body {
  14.     background-color: #F1F1F1;
  15.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  16.     font-size: 12px;
  17.     color: #77787A;
  18.     margin: 0 auto;
  19.     text-align: center;
  20. }
  21.  
  22. fieldset {
  23.     border: 1px solid #900;
  24.     margin-top: 30px;
  25.     padding: 20px;
  26. }
  27.  
  28. fieldset td {
  29.     padding: 2px;
  30.     font-weight: bold;
  31. }
  32.  
  33. img {
  34.     border: 0;
  35. }
  36.  
  37. label {
  38.     padding-top: 20px;
  39. }
  40.  
  41. legend {
  42.     font-size: 14px;
  43.     color: #900;
  44.     font-weight: bold;
  45. }
  46.  
  47. p {
  48.     margin-left: 20px;
  49.     padding-top: 10px;
  50. }
  51.  
  52. p, ul {
  53.     margin-top: 0px;
  54.     margin-bottom: 0px;
  55. }
  56.  
  57. ul {
  58.     margin-left: -15px;
  59. }
  60.  
  61. .a_solo a:hover {
  62.     color: #900;
  63.     text-decoration: underline;
  64. }
  65.  
  66. .cabeceracategoriaslist {
  67.     width: 189px;
  68.     height: 36px;
  69.     background: url(../img/contenedortitulochico.gif) no-repeat;
  70. }
  71.  
  72. .cabeceraderecha {
  73.     width: 181px;
  74.     height: 36px;
  75.     background: url(../img/contenedortitulochicoderecha.gif) no-repeat;
  76. }
  77.  
  78. .corte {
  79.     clear: both;
  80. }
  81.  
  82. .cuerpocategoriaslist {
  83.     width: 189px;
  84.     height: auto;
  85.     background: url(../img/cuerpochico.gif) repeat-y;
  86.     padding-top: 20px;
  87. }
  88.  
  89. .cuerpocategoriaslist li {
  90.     padding-top: 7px;
  91.     padding-bottom: 5px;
  92.     list-style: none;
  93.     background: url(../img/fondolista.gif) no-repeat;
  94.     background-position: bottom left;
  95. }
  96.  
  97. .cuerpoderecha {
  98.     width: 181px;
  99.     height: auto;
  100.     background: url(../img/cuerpochicoderecha.gif) repeat-y;
  101.     padding-top: 20px;
  102. }
  103.  
  104. .piecategoriaslist {
  105.     margin: 0 auto;
  106.     width: 189px;
  107.     height: 20px;
  108.     background: url(../img/piechico.gif) no-repeat;
  109. }
  110.  
  111. .piederecha {
  112.     margin: 0 auto;
  113.     width: 181px;
  114.     height: 40px;
  115.     background: url(../img/piechicoderecha.gif) no-repeat;
  116.     background-position: top;
  117. }
  118.  
  119. .titulito {
  120.     font-weight: bold;
  121. }
  122.  
  123. .titulitorojo {
  124.     font-weight: bold;
  125.     color: #900;
  126. }
  127.  
  128. #idioma {
  129.     width: 200px;
  130.     height: 51px;
  131.     float: right;
  132.     text-align: right;
  133.     padding-right: 20px;
  134. }
  135.  
  136. #izquierda {
  137.     position:absolute;
  138.     width: 189px;
  139.     margin-left: 20px;
  140.     text-align: left;
  141. }
  142. #centro {
  143.     position:absolute;
  144.     width: 518px;
  145.     margin-left: 229px;;
  146.     text-align: left;
  147. }
  148.  
  149. #derecha {
  150.     position: absolute;
  151.     width: 181px;
  152.     margin-left: 767px;
  153.     text-align: left;
  154. }
  155.  
  156. #logo {
  157.     width: 300px;
  158.     height: 75px;
  159.     background: url(../img/logo.gif) no-repeat;
  160.     margin-left: 20px;
  161.     margin-top: 51px;
  162. }
  163.  
  164. #menumed {
  165.     margin-top: 0px;
  166.     margin-left: 31px;
  167. }
  168.  
  169. #menumed li {
  170.     list-style: none;
  171.     float: left;
  172.     padding-left: 10px;
  173.     padding-right: 10px;
  174. }
  175.  
  176. #menumed li a {
  177.     text-decoration: none;
  178.     color: #77787A;
  179. }
  180.  
  181. #menumed li a:hover {
  182.     text-decoration: none;
  183.     color: #900;
  184. }
  185.  
  186. #menunosotros {
  187.     position: absolute;
  188.     width: auto;
  189.     height: auto;
  190.     margin-top: 44px;
  191.     margin-left: 115px;
  192.     padding: 5px;
  193.     border: 1px solid #D9D9D9;
  194.     background-color: #990;
  195.     color: #FFF;
  196.     display: none;
  197. }
  198.  
  199. #menunosotros a {
  200.     color: #FFF;
  201.     text-decoration: none;
  202.     font-weight: bold;
  203. }
  204.  
  205. #menunosotros a:hover {
  206.     color: #FFF;
  207.     text-decoration: underline;
  208.     font-weight: bold;
  209. }
  210.  
  211. #menutop {
  212.     margin-left: 20px;
  213.     padding-top: 7px;
  214. }
  215.  
  216. #menutop li {
  217.     list-style: none;
  218.     margin-top: 10px;
  219.     padding-left: 10px;
  220.     padding-right: 10px;
  221.     float: left;
  222. }
  223.  
  224. #menutop li a {
  225.     text-decoration: none;
  226.     color: #77787A;
  227.     margin: 5px;
  228.     padding: 5px;
  229.     padding-left: 10px;
  230.     padding-right: 10px;
  231.     text-align: center;
  232. }
  233.  
  234. #menutop li a:hover {
  235.     text-decoration: none;
  236.     color: #84080A;
  237.     border: 1px solid #84080A;
  238.     text-align: center;
  239. }
  240.  
  241. #pagina {
  242.     margin: 0 auto;
  243.     margin-top: 20px;
  244.     bottom: 20px;
  245.     width: 968px;
  246.     height: auto;
  247.     text-align: left;
  248. }
  249.  
  250. #cabecera {
  251.     width: 968px;
  252.     height: 179px;
  253.     background: url(../img/top.gif) no-repeat;
  254. }
  255.  
  256. #carritoinfo {
  257.     position: absolute;
  258.     width: 180px;
  259.     height: 94px;
  260.     border-left: 1px #D9D9D9 dotted;
  261.     margin-left: 750px;
  262.     margin-top: -72px;
  263.     padding-left: 20px;
  264.     text-align: right;
  265. }
  266.  
  267. #cuerpo {
  268.     width: 968px;
  269.     padding-bottom: 10px;
  270.     background: url(../img/med.gif) repeat-y;
  271. }
  272.  
  273. #pie {
  274.     width: 968px;
  275.     height: 80px;
  276.     background: url(../img/bot.gif) no-repeat;
  277.     background-position: top;
  278.     text-align: center;
  279. }
  280.  
  281. #pie a {
  282.     color: #77787A;
  283.     text-decoration: none;
  284. }
  285.  
  286. #pie a:hover {
  287.     color: #77787A;
  288.     text-decoration: underline;
  289. }
  290.  
  291. /* Para lightbox personalizado */
  292. .fondobox {
  293.     display: none;
  294.     position: fixed;
  295.     top: 0%;
  296.     left: 0%;
  297.     width: 100%;
  298.     height: 100%;
  299.     background-color: black;
  300.     z-index: 1001;
  301.     filter: alpha(opacity=80);
  302.     -moz-opacity: .80;
  303.     opacity: .80;
  304. }
  305.  
  306. .popupbox {
  307.     display: none;
  308.     position: fixed;
  309.     top: 25%;
  310.     left: 25%;
  311.     width: 50%;
  312.     height: auto;
  313.     padding: 16px;
  314.     border: 4px solid #D0D0D0;
  315.     background-color: white;
  316.     z-index: 1002;
  317.     overflow: auto;
  318.     text-align: left;
  319. }
  320.  
  321. .formcontacto {
  322.     display: none;
  323.     position: fixed;
  324.     width: 350px;
  325.     height: auto;
  326.     padding: 16px;
  327.     border: 4px solid #D0D0D0;
  328.     background-color: white;
  329.     z-index: 1002;
  330.     overflow: auto;
  331.     text-align: left;
  332. }
  333.  
  334. .titulopopup {
  335.     font-size: 18px;
  336.     color: #900;
  337.     font-weight: bold;
  338. }
  339.  
  340. #cerrarpopup {
  341.     width: 16px;
  342.     height: 16px;
  343.     float: right;
  344.     background: url(../img/cerrarpopup.gif) no-repeat;
  345.     cursor: pointer;
  346. }
  347.  
  348. #cerrarpopupcontacto {
  349.     width: 16px;
  350.     height: 16px;
  351.     float: right;
  352.     background: url(../img/cerrarpopup.gif) no-repeat;
  353.     cursor: pointer;
  354. }
  355. /**********************************************/
  356.  
  357. /* SubMenus */
  358.  
  359. #cerrarmenunosotros {
  360.     width: 16px;
  361.     height: 16px;
  362.     float: right;
  363.     background: url(../img/cerrarpopup.gif) no-repeat;
  364.     cursor: pointer;
  365. }
__________________
El aprendiz.
  #4 (permalink)  
Antiguo 27/04/2009, 17:27
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Respuesta: Que un div crezca de acuerdo a su contenido

EL HTML:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <link href="style/stilos.css" rel="stylesheet" type="text/css" />
  6. </head>
  7.  
  8. <div id="pagina">
  9.     ...
  10.     <div id="cuerpo">
  11.         <div id="izquierda"></div>
  12.         <div id="centro">
  13.             <div id="formregistro" style="margin-top: 50px">
  14.                 <span class="titulopopup">Formulario de registro</span>
  15.                 <p>
  16.                     Ingrese sus datos en el formulario que sigue abajo. Todos los campos son obligatorios.
  17.                 </p>
  18.                 <fieldset>
  19.                     <legend>Datos de acceso</legend>
  20.                     <table width="100%" cellpadding="2" cellspacing="2">
  21.                         <tr>
  22.                             <td width="150">
  23.                                 <label for="regemail" id="label_regemail">Correo electr&oacute;nico</label>
  24.                             </td>
  25.                             <td id="ver_regemail">
  26.                                 <input type="text" id="regemail" size="40" />
  27.                                 <strong><div id="error_regemail"></div></strong>
  28.                             </td>
  29.                         </tr>
  30.                         <tr>
  31.                             <td>
  32.                                 <label for="regusuario" id="label_regusuario">Nickname</label>
  33.                             </td>
  34.                             <td id="ver_regusuario">
  35.                                 <input type="text" id="regusuario" size="40" />
  36.                                 <strong><div id="error_regusuario"></div></strong>
  37.                             </td>
  38.                         </tr>
  39.                         <tr>
  40.                             <td>
  41.                                 <label for="regclave" id="label_regclave">Contrase&ntilde;a</label>
  42.                             </td>
  43.                             <td id="ver_regclave">
  44.                                 <input type="password" id="regclave" size="40" />
  45.                                 <strong><div id="error_regclave"></div></strong>
  46.                             </td>
  47.                         </tr>
  48.                         <tr>
  49.                             <td>
  50.                                 <label for="regrclave" id="label_regrclave">Repita la contrase&ntilde;a</label>
  51.                             </td>
  52.                             <td id="ver_regrclave">
  53.                                 <input type="password" id="regrclave" size="40" />
  54.                                 <strong><div id="error_regrclave"></div></strong>
  55.                             </td>
  56.                         </tr>
  57.                     </table>
  58.                 </fieldset>
  59.                
  60.                 <fieldset>
  61.                     <legend>Datos generales</legend>
  62.                     <table width="100%" cellpadding="2" cellspacing="2">
  63.                         <tr>
  64.                             <td width="150">
  65.                                 <label for="regnombre" id="label_regnombre">Nombres</label>
  66.                             </td>
  67.                             <td id="ver_regnombre">
  68.                                 <input type="text" id="regnombre" value="" size="40" />
  69.                                 <strong><div id="error_regnombre"></div></strong>
  70.                             </td>
  71.                         </tr>
  72.                         <tr>
  73.                             <td>
  74.                                 <label for="regapellido" id="label_regapellido">Apellidos</label>
  75.                             </td>
  76.                             <td id="ver_regapellido">
  77.                                 <input type="text" id="regapellido" value="" size="40" />
  78.                                 <strong><div id="error_regapellido"></div></strong>
  79.                             </td>
  80.                         </tr>
  81.                         <tr>
  82.                             <td>
  83.                                 <label for="regnacimiento" id="label_regnacimiento">Fecha de nacimiento</label>
  84.                             </td>
  85.                             <td id="ver_regnacimiento">
  86.                                 <select id="dia">
  87.                                     <option value="" selected>D&iacute;a</option>
  88.                                     <?php
  89.                                     for ($d = 1; $d <= 31; $d++) {
  90.                                         echo "<option value='".$d."'>".$d."</option>";
  91.                                     }
  92.                                     ?>
  93.                                 </select>
  94.                                 <select id="mes">
  95.                                     <option value="" selected>Mes</option>
  96.                                     <?php
  97.                                     for ($m = 1; $m <= 12; $m++) {
  98.                                         echo "<option value='".$m."'>".$meses[$m]."</option>";
  99.                                     }
  100.                                     ?>
  101.                                 </select>
  102.                                 <select id="ano">
  103.                                     <option value="" selected>A&ntilde;o</option>
  104.                                     <?php
  105.                                     for ($a = 0; $a < count($anos); $a++) {
  106.                                         echo "<option value='".$anos[$a]."'>".$anos[$a]."</option>";
  107.                                     }
  108.                                     ?>
  109.                                 </select>
  110.                                 <strong><div id="error_regnacimiento"></div></strong>
  111.                             </td>
  112.                         </tr>
  113.                         <tr>
  114.                             <td>
  115.                                 <label for="regpais" id="label_regpais">Fecha de nacimiento</label>
  116.                             </td>
  117.                             <td id="ver_regpais">
  118.                                 <select id="regpais" style="width: 266px;">
  119.                                     <option value="" selected>Pa&iacute;s</option>
  120.                                 </select>
  121.                                 <strong><div id="error_regpais"></div></strong>
  122.                             </td>
  123.                         </tr>
  124.                         <tr>
  125.                             <td>
  126.                                 <label for="regciudad" id="label_regciudad">Ciudad</label>
  127.                             </td>
  128.                             <td id="ver_regciudad">
  129.                                 <input type="text" id="regciudad" value="" size="40" />
  130.                                 <strong><div id="error_regciudad"></div></strong>
  131.                             </td>
  132.                         </tr>
  133.                     </table>
  134.                 </fieldset>
  135.                 <fieldset>
  136.                     <legend>Tarjeta de cr&eacute;dito</legend>
  137.                     <table width="100%" cellpadding="2" cellspacing="2">
  138.                         <tr>
  139.                             <td colspan="2">
  140.                                 <span style="font-weight:normal">Ingrese los datos de su tarjeta de cr&eacute;dito para efectuar los pagos de su membres&iacute;a de forma autom&aacute;tica, as&iacute; como las compras de los productos.</span>
  141.                             </td>
  142.                         </tr>
  143.                         <tr>
  144.                             <td colspan="2">&nbsp;</td>
  145.                         </tr>
  146.                         <tr>
  147.                             <td width="150">
  148.                                 <label for="regtarjeta" id="label_regtarjeta">Tipo de tarjeta</label>
  149.                             </td>
  150.                             <td id="ver_regtarjeta">
  151.                                 <input type="text" id="regtarjeta" value="" size="50" />
  152.                                 <strong><div id="error_regtarjeta"></div></strong>
  153.                             </td>
  154.                         </tr>
  155.                         <tr>
  156.                             <td>
  157.                                 <label for="regnumero" id="label_regnumero">N&uacute;mero de tarjeta</label>
  158.                             </td>
  159.                             <td id="ver_regnumero">
  160.                                 <input type="text" id="regnumero" value="" size="50" />
  161.                                 <strong><div id="error_regnumero"></div></strong>
  162.                             </td>
  163.                         </tr>
  164.                         <tr>
  165.                             <td>
  166.                                 <label for="regnombretarjeta" id="label_regnombretarjeta">Nombre en tarjeta</label>
  167.                             </td>
  168.                             <td id="ver_regnumero">
  169.                                 <input type="text" id="regnombretarjeta" value="" size="50" />
  170.                                 <strong><div id="error_regnombretarjeta"></div></strong>
  171.                             </td>
  172.                         </tr>
  173.                         <tr>
  174.                             <td>
  175.                                 <label for="regdirecciontarjeta" id="label_regdirecciontarjeta">Direcci&oacute; en tarjeta</label>
  176.                             </td>
  177.                             <td id="ver_regdirecciontarjeta">
  178.                                 <input type="text" id="regdirecciontarjeta" value="" size="50" />
  179.                                 <strong><div id="error_regdirecciontarjeta"></div></strong>
  180.                             </td>
  181.                         </tr>
  182.                     </table>
  183.                 </fieldset>
  184.                 <br />
  185.                 <table width="100%" cellpadding="2" cellspacing="2">
  186.                     <tr>
  187.                         <td align="center">
  188.                             <input type="image" id="btnregistrar" src="img/btnRegistrese.gif" />
  189.                         </td>
  190.                     </tr>
  191.                 </table>
  192.             </div>
  193.             <div class="corte"></div>
  194.         </div>
  195.         ....
  196. </div>
  197. </body>
  198. </html>
__________________
El aprendiz.
  #5 (permalink)  
Antiguo 27/04/2009, 17:48
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Que un div crezca de acuerdo a su contenido

bueno, para comenzar tienes un div que no esta cerrado, y para que un div estire tendría que ser de esta manera:

Código HTML:
<style type="text/css">
#contenido{
width: 800px;
    height: auto;
overflow:auto
}
</style>

<div id="contenido">sdfasdf</div> 
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 28/04/2009, 02:21
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Respuesta: Que un div crezca de acuerdo a su contenido

Hola willyfc, si tienes razon, eso era un error, pero al fin descubri lo que no me permitia hacer lo que queria, lo que sucedía era que las etiquetas #izquierda, #centro y #derecha, era absolutas, asi nunca hiba a crecer el div donde habia metido estas.

Lo cambie asi:
Código css:
Ver original
  1. #izquierda {
  2.     width: 189px;
  3.     margin-left: 20px;
  4.     text-align: left;
  5.     float: left;
  6. }
  7. #centro {
  8.     width: 518px;
  9.     margin-left: 20px;;
  10.     text-align: left;
  11.     float: left;
  12. }
  13.  
  14. #derecha {
  15.     width: 181px;
  16.     margin-left: 20px;
  17.     text-align: left;
  18.     float: left;
  19. }
Y use lo que me había comentado triby, de poner antes de cerrar el div "cuerpo" esto:
Código html:
Ver original
  1. <div style="clear:both"></div>
Gracias a todos por su atencion.
__________________
El aprendiz.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:09.