Que un div crezca de acuerdo a su contenido

juandedios · #1 (**permalink**) 27/04/2009, 15:49

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.

Triby · #2 (**permalink**) 27/04/2009, 16:10

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<div id="contenido">
    <!-- Aqui va tu contenido flotante -->
    <div class="corte"></div>
</div>

En el css:

Código css:

Ver originaldiv.corte {
    clear:bloth; /* Limpia flotantes de derecha e izquierda, puedes usar left o right, dependiendo de los elementos que tengas flotantes */
}

Si tienes posiciones absolutas o relativas habria que ver tu codigo.

juandedios · #3 (**permalink**) 27/04/2009, 16:25

Lo puse como tu dices, pero nada:

este es mi css:

Código css:

Ver original@charset "utf-8";
/* CSS Document */
 
a {
    cursor: pointer;
}
 
html, body {
    width: 100&#37;;
    height: 100%;
}
 
body {
    background-color: #F1F1F1;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 12px;
    color: #77787A;
    margin: 0 auto;
    text-align: center;
}
 
fieldset {
    border: 1px solid #900;
    margin-top: 30px;
    padding: 20px;
}
 
fieldset td {
    padding: 2px;
    font-weight: bold;
}
 
img {
    border: 0;
}
 
label {
    padding-top: 20px;
}
 
legend {
    font-size: 14px;
    color: #900;
    font-weight: bold;
}
 
p {
    margin-left: 20px;
    padding-top: 10px;
}
 
p, ul {
    margin-top: 0px;
    margin-bottom: 0px;
}
 
ul {
    margin-left: -15px;
}
 
.a_solo a:hover {
    color: #900;
    text-decoration: underline;
}
 
.cabeceracategoriaslist {
    width: 189px;
    height: 36px;
    background: url(../img/contenedortitulochico.gif) no-repeat;
}
 
.cabeceraderecha {
    width: 181px;
    height: 36px;
    background: url(../img/contenedortitulochicoderecha.gif) no-repeat;
}
 
.corte {
    clear: both;
}
 
.cuerpocategoriaslist {
    width: 189px;
    height: auto;
    background: url(../img/cuerpochico.gif) repeat-y;
    padding-top: 20px;
}
 
.cuerpocategoriaslist li {
    padding-top: 7px;
    padding-bottom: 5px;
    list-style: none;
    background: url(../img/fondolista.gif) no-repeat;
    background-position: bottom left;
}
 
.cuerpoderecha {
    width: 181px;
    height: auto;
    background: url(../img/cuerpochicoderecha.gif) repeat-y;
    padding-top: 20px;
}
 
.piecategoriaslist {
    margin: 0 auto;
    width: 189px;
    height: 20px;
    background: url(../img/piechico.gif) no-repeat;
}
 
.piederecha {
    margin: 0 auto;
    width: 181px;
    height: 40px;
    background: url(../img/piechicoderecha.gif) no-repeat;
    background-position: top;
}
 
.titulito {
    font-weight: bold;
}
 
.titulitorojo {
    font-weight: bold;
    color: #900;
}
 
#idioma {
    width: 200px;
    height: 51px;
    float: right;
    text-align: right;
    padding-right: 20px;
}
 
#izquierda {
    position:absolute;
    width: 189px;
    margin-left: 20px;
    text-align: left;
}
#centro {
    position:absolute;
    width: 518px;
    margin-left: 229px;;
    text-align: left;
}
 
#derecha {
    position: absolute;
    width: 181px;
    margin-left: 767px;
    text-align: left;
}
 
#logo {
    width: 300px;
    height: 75px;
    background: url(../img/logo.gif) no-repeat;
    margin-left: 20px;
    margin-top: 51px;
}
 
#menumed {
    margin-top: 0px;
    margin-left: 31px;
}
 
#menumed li {
    list-style: none;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}
 
#menumed li a {
    text-decoration: none;
    color: #77787A;
}
 
#menumed li a:hover {
    text-decoration: none;
    color: #900;
}
 
#menunosotros {
    position: absolute;
    width: auto;
    height: auto;
    margin-top: 44px;
    margin-left: 115px;
    padding: 5px;
    border: 1px solid #D9D9D9;
    background-color: #990;
    color: #FFF;
    display: none;
}
 
#menunosotros a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
 
#menunosotros a:hover {
    color: #FFF;
    text-decoration: underline;
    font-weight: bold;
}
 
#menutop {
    margin-left: 20px;
    padding-top: 7px;
}
 
#menutop li {
    list-style: none;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
}
 
#menutop li a {
    text-decoration: none;
    color: #77787A;
    margin: 5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
 
#menutop li a:hover {
    text-decoration: none;
    color: #84080A;
    border: 1px solid #84080A;
    text-align: center;
}
 
#pagina {
    margin: 0 auto;
    margin-top: 20px;
    bottom: 20px;
    width: 968px;
    height: auto;
    text-align: left;
}
 
#cabecera {
    width: 968px;
    height: 179px;
    background: url(../img/top.gif) no-repeat;
}
 
#carritoinfo {
    position: absolute;
    width: 180px;
    height: 94px;
    border-left: 1px #D9D9D9 dotted;
    margin-left: 750px;
    margin-top: -72px;
    padding-left: 20px;
    text-align: right;
}
 
#cuerpo {
    width: 968px;
    padding-bottom: 10px;
    background: url(../img/med.gif) repeat-y;
}
 
#pie {
    width: 968px;
    height: 80px;
    background: url(../img/bot.gif) no-repeat;
    background-position: top;
    text-align: center;
}
 
#pie a {
    color: #77787A;
    text-decoration: none;
}
 
#pie a:hover {
    color: #77787A;
    text-decoration: underline;
}
 
/* Para lightbox personalizado */
.fondobox {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    filter: alpha(opacity=80);
    -moz-opacity: .80;
    opacity: .80;
}
 
.popupbox {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: auto;
    padding: 16px;
    border: 4px solid #D0D0D0;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    text-align: left;
}
 
.formcontacto {
    display: none;
    position: fixed;
    width: 350px;
    height: auto;
    padding: 16px;
    border: 4px solid #D0D0D0;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    text-align: left;
}
 
.titulopopup {
    font-size: 18px;
    color: #900;
    font-weight: bold;
}
 
#cerrarpopup {
    width: 16px;
    height: 16px;
    float: right;
    background: url(../img/cerrarpopup.gif) no-repeat;
    cursor: pointer;
}
 
#cerrarpopupcontacto {
    width: 16px;
    height: 16px;
    float: right;
    background: url(../img/cerrarpopup.gif) no-repeat;
    cursor: pointer;
}
/**********************************************/
 
/* SubMenus */
 
#cerrarmenunosotros {
    width: 16px;
    height: 16px;
    float: right;
    background: url(../img/cerrarpopup.gif) no-repeat;
    cursor: pointer;
}

juandedios · #4 (**permalink**) 27/04/2009, 16:27

EL HTML:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="style/stilos.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="pagina">
    ...
    <div id="cuerpo">
        <div id="izquierda"></div>
        <div id="centro">
            <div id="formregistro" style="margin-top: 50px">
                <span class="titulopopup">Formulario de registro</span>
                <p>
                    Ingrese sus datos en el formulario que sigue abajo. Todos los campos son obligatorios.
                </p>
                <fieldset>
                    <legend>Datos de acceso</legend>
                    <table width="100%" cellpadding="2" cellspacing="2">
                        <tr>
                            <td width="150">
                                <label for="regemail" id="label_regemail">Correo electr&oacute;nico</label>
                            </td>
                            <td id="ver_regemail">
                                <input type="text" id="regemail" size="40" />
                                <strong><div id="error_regemail"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regusuario" id="label_regusuario">Nickname</label>
                            </td>
                            <td id="ver_regusuario">
                                <input type="text" id="regusuario" size="40" />
                                <strong><div id="error_regusuario"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regclave" id="label_regclave">Contrase&ntilde;a</label>
                            </td>
                            <td id="ver_regclave">
                                <input type="password" id="regclave" size="40" />
                                <strong><div id="error_regclave"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regrclave" id="label_regrclave">Repita la contrase&ntilde;a</label>
                            </td>
                            <td id="ver_regrclave">
                                <input type="password" id="regrclave" size="40" />
                                <strong><div id="error_regrclave"></div></strong>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                
                <fieldset>
                    <legend>Datos generales</legend>
                    <table width="100%" cellpadding="2" cellspacing="2">
                        <tr>
                            <td width="150">
                                <label for="regnombre" id="label_regnombre">Nombres</label>
                            </td>
                            <td id="ver_regnombre">
                                <input type="text" id="regnombre" value="" size="40" />
                                <strong><div id="error_regnombre"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regapellido" id="label_regapellido">Apellidos</label>
                            </td>
                            <td id="ver_regapellido">
                                <input type="text" id="regapellido" value="" size="40" />
                                <strong><div id="error_regapellido"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regnacimiento" id="label_regnacimiento">Fecha de nacimiento</label>
                            </td>
                            <td id="ver_regnacimiento">
                                <select id="dia">
                                    <option value="" selected>D&iacute;a</option>
                                    <?php
                                    for ($d = 1; $d <= 31; $d++) {
                                        echo "<option value='".$d."'>".$d."</option>";
                                    }
                                    ?>
                                </select>
                                <select id="mes">
                                    <option value="" selected>Mes</option>
                                    <?php
                                    for ($m = 1; $m <= 12; $m++) {
                                        echo "<option value='".$m."'>".$meses[$m]."</option>";
                                    }
                                    ?>
                                </select>
                                <select id="ano">
                                    <option value="" selected>A&ntilde;o</option>
                                    <?php
                                    for ($a = 0; $a < count($anos); $a++) {
                                        echo "<option value='".$anos[$a]."'>".$anos[$a]."</option>";
                                    }
                                    ?>
                                </select>
                                <strong><div id="error_regnacimiento"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regpais" id="label_regpais">Fecha de nacimiento</label>
                            </td>
                            <td id="ver_regpais">
                                <select id="regpais" style="width: 266px;">
                                    <option value="" selected>Pa&iacute;s</option>
                                </select>
                                <strong><div id="error_regpais"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regciudad" id="label_regciudad">Ciudad</label>
                            </td>
                            <td id="ver_regciudad">
                                <input type="text" id="regciudad" value="" size="40" />
                                <strong><div id="error_regciudad"></div></strong>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <fieldset>
                    <legend>Tarjeta de cr&eacute;dito</legend>
                    <table width="100%" cellpadding="2" cellspacing="2">
                        <tr>
                            <td colspan="2">
                                <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>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">&nbsp;</td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label for="regtarjeta" id="label_regtarjeta">Tipo de tarjeta</label>
                            </td>
                            <td id="ver_regtarjeta">
                                <input type="text" id="regtarjeta" value="" size="50" />
                                <strong><div id="error_regtarjeta"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regnumero" id="label_regnumero">N&uacute;mero de tarjeta</label>
                            </td>
                            <td id="ver_regnumero">
                                <input type="text" id="regnumero" value="" size="50" />
                                <strong><div id="error_regnumero"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regnombretarjeta" id="label_regnombretarjeta">Nombre en tarjeta</label>
                            </td>
                            <td id="ver_regnumero">
                                <input type="text" id="regnombretarjeta" value="" size="50" />
                                <strong><div id="error_regnombretarjeta"></div></strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="regdirecciontarjeta" id="label_regdirecciontarjeta">Direcci&oacute; en tarjeta</label>
                            </td>
                            <td id="ver_regdirecciontarjeta">
                                <input type="text" id="regdirecciontarjeta" value="" size="50" />
                                <strong><div id="error_regdirecciontarjeta"></div></strong>
                            </td>
                        </tr>
                    </table>
                </fieldset>
                <br />
                <table width="100%" cellpadding="2" cellspacing="2">
                    <tr>
                        <td align="center">
                            <input type="image" id="btnregistrar" src="img/btnRegistrese.gif" />
                        </td>
                    </tr>
                </table>
            </div>
            <div class="corte"></div>
        </div>
        ....
</div>
</body>
</html>

willyfc · #5 (**permalink**) 27/04/2009, 16:48

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>

juandedios · #6 (**permalink**) 28/04/2009, 01:21

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#izquierda {
    width: 189px;
    margin-left: 20px;
    text-align: left;
    float: left;
}
#centro {
    width: 518px;
    margin-left: 20px;;
    text-align: left;
    float: left;
}
 
#derecha {
    width: 181px;
    margin-left: 20px;
    text-align: left;
    float: left;
}

Y use lo que me había comentado triby, de poner antes de cerrar el div "cuerpo" esto:

Código html:

Ver original<div style="clear:both"></div>

Gracias a todos por su atencion.