Problemas con height de una capa

ACIDWARRIOR · #1 (**permalink**) 13/11/2012, 15:58

Que tal, tengo el siguiente código :

Código:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content='text/html; charset="UTF-8"' />
    <title>Test Noticias!</title>
    <link rel="stylesheet" type="text/css" href="http://www.henki.com.ar/berisso/estilos/navbar.css" />
    <link rel="stylesheet" type="text/css" href="http://www.henki.com.ar/berisso/estilos/general.css" />
    <link rel="icon" type="image/ico" href="imagenes/favicon.ico" />

  </head>
  <body>
    <div id="contenedor_sitio" style="position:relative; background-color:#cf987a; top:0px; width:1024px; padding: 0px; margin: 0 auto;">
      <div id="encabezado_sitio" style="position:absolute; background-color:#ddcdc5; top: 0px; width:100%; height:200px; border: 1px solid #000000;"> 
          <div id="logo_sitio" style="position:absolute; background-image: url(imagenes/encabezado_test1.jpg); top:0; left: 0px; width:1024px; height: 200px;"> 
          </div>
      </div>
      <div id="navegacion_sitio" style="position:absolute; top: 205px; width:100%; height:30px;">          
        <div id="navegacion_sitio_izquierda" style="position:absolute; background-image: url(imagenes/navbar_izquierda.png); top: 0px; left: 0px; width:16px; height:30px;">
        </div>
        <div id="navegacion_sitio_centro" style="position:absolute; background-image: url(imagenes/navbar_centro.png); top: 0px; left: 16px; width:993px; height:30px;">
          <ul id="nav_bar">
            <li><a href="index.php">Inicio</a></li>
            <li><a href="noticia_test.php">Noticia test</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
            <li><a href="#">Test6</a></li>
          </ul>
        </div>  
        <div id="navegacion_sitio_derecha" style="position:absolute; background-image: url(imagenes/navbar_derecha.png); top: 0px; left: 1009px; width:16px; height:30px;">
        </div> 
      </div>
      
      <div id="contenido_sitio" style="position:absolute; background-color:#cf987a; left:0px; top: 235px; width:1024px;">    
        <div id="contenido_noticia" style="position:absolute; background-color:#cf987a; top: 0px; left: 0px; width:1024px; ">
          <div id="noticia_titulo" style="position:absolute; background-color:#6c2601; color: #e3e086; top: 4px; left: 4px; height: 22px; width:798px; font-size: 16px; font-weight: bold; font-family: Arial;">
            <span style="padding: 2px;">
              Noticia centro 1
            </span>
          </div>
          
          <div id="noticia_texto" style="position:absolute; top: 24px; margin: 4px; left: 0px; width:798px;">
            <img src="imagenes/noticia_test1.jpg" alt="imagen_noticia" />
            <p style="padding: 10px;">
              Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. 
            </p>
          </div>
        </div>
         
        <div id="noticias_contenido_derecha" style="position:absolute; background-color:#cf987a; top: 0px; left: 795px; width:230px; height:870px;">
          <div id="noticia_derecha1" style="position:relative; top:5px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
            <h3>Noticia der 1</h3>
            <span>
              Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba...(<a href="noticia_test.php">más</a>)
            </span>
          </div>
          <div id="noticia_derecha2" style="position:relative; top:7px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
            <h3>Noticia der 2</h3>
            <span>
              Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba...(<a href="noticia_test.php">más</a>)
            </span>
          </div>
          <div id="noticia_derecha3" style="position:relative; top:9px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
            <h3>Noticia der 3</h3>
            <span>
              Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba...(<a href="noticia_test.php">más</a>)
            </span>
          </div>
          <div id="noticia_derecha4" style="position:relative; top:11px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
            <span>
              <img src="imagenes/publicidad_media_carni.png" href="#" alt="publicidad"></img>
            </span>
          </div>
        </div>  
      </div>        
    </div>
    <div id="footer_sitio" style="position:relative; width:1024px; height: 50px; padding:0; margin: 0 auto;">
      <div id="footer_sitio_izquierda" style="position:absolute; background-image: url(imagenes/footer_izquierda.png); top: 0px; left: 0px; width:16px; height:30px;">
      </div>
      <div id="footer_sitio_centro" style="position:absolute; color: #e3e086; background-image: url(imagenes/footer_centro.png); top: 0px; left: 16px; width:993px; height:30px;">
         <center>
         <span> © 2012 Henki Test - Este es un pie de página de prueba.</span>
         </center>
      </div>  
      <div id="footer_sitio_derecha" style="position:absolute; background-image: url(imagenes/footer_derecha.png); top: 0px; left: 1009px; width:16px; height:30px;">
      </div>
    </div>
  </body>
</html>

El sitio esta dividido en dos divs principales: "contenedor_sitio" y "footer_sitio". Los dos tienen la propiedad "position" en relative. El tema es que el div "contenedor_sitio" no está modificando su height según el contenido ( no le puse propiedad height), y el div "footer_sitio" aparece arriba de todo, como si "contenedor_sitio" no tuviera height.

Alguien podría indicarme en que me estoy equivocando?

PD: uso propiedades "style" por que estoy haciendo una especie de boceto, si gusta entonces sale css.

skiper0125 · #2 (**permalink**) 13/11/2012, 16:05

Hola que tal.

Para que no te pase ese problema puedes colocar la opción clear: both;

Saludos

ACIDWARRIOR · #3 (**permalink**) 13/11/2012, 16:14

Cita:

Iniciado por skiper0125

Hola que tal.

Para que no te pase ese problema puedes colocar la opción clear: both;

Saludos

Gracias por la respuesta, googlé 'clear:both' y ví que es para tratar floats. Yo no usé ningún float. Lo probé de todas maneras en "contenedor_sitio" y "footer_sitio" y no funcionó.

pollin14 · #4 (**permalink**) 14/11/2012, 15:03

Tu codigo tiene varios problemas.Uno de ellos es que estas usando la propiedad style para asígnar estilos, lo cual complica (por lo menos a mi) el analisis de tu codigo. Segunda, estas usando la propiedad position la cual te causara muchos problemas y complicaciones, y creo que para lo que quieres no es necesaria (la complicacion y los problemas

).

Este es codigo puro HTML de como deberias hacer la maquetacion y la separacion de CSS.
En este caso incluyo el codigo CSS dentro del HTML para que lo puedas visualizar rapido, pero deberia ir en un archivo aparte (estilo.css por ejemplo) del html.

Esto es lo correcto.

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                background-color:#DADADA;
            }
 
            .center{
                margin-right:auto;
                margin-left:auto;
            }
            #izquierda,#derecha{
                float:left;
            }
 
            #encabezado{
                height:200px;
                width:520px;
                background-color:green;
            }
            #principal{
                width:530px;
                min-height:600px;
                padding:5px;
                background-color: yellow;
            }
            
            #izquierda,#derecha{
                float:left;
            }
            #izquierda{
                width:400px;
            }
 
            #derecha{
                width:120px;
/*              height:240px;*/
                background-repeat: no-repeat;
            }
 
            #menu_horizontal{
                height:20px;
                width:520px;
                background-color:purple;
            }
            ul li{
                float:left;
                list-style-image: none;
                list-style-type: none;
                margin-left:20px;
            }
            
            #contenido{
                background-color:pink;
                min-height:200px;
            }
            
            .lateral{
                border: black dotted thin;
                margin-top:5px;
                background-color:orange;
                display:block;
            }
        </style>
    </head>
    <body>
        <div id="principal" class="center">
            <div id="encabezado"></div>
            <div id="menu_horizontal">
                <ul>
                    <li>noticia 1</li>
                    <li>noticia 2</li>
                    <li>noticia 3</li>
                </ul>
            </div>
 
            <div id="contenido">
                <div id="izquierda">
                    <h1>Noticia Centro </h1>
                    Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                    Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                    Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                    Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                    Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                    Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                    Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                </div>
                <div id="derecha">
                    <div class="lateral"><h1>noticia 1</h1>
                        Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
                        </div>
                    <div class="lateral"><h1>noticia 2</h1>Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.</div>
                    <div class="lateral">noticia 3Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.</div>
                    <div class="lateral">noticia 4Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.</div>
                    <div style="clear:both"></div>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
    </body>
</html>

Un ultimo consejo, si tienes que meter imagenes por ejemplo en el encabezado o banners usa CSS.

ACIDWARRIOR · #5 (**permalink**) 16/11/2012, 19:56

Muchas gracias pollin14 :D, la verdad ya estaba averiguando mas o menos por donde venía el problema. Pero ahora queda bien aclarado.

Y gracias de nuevo por ordenar el código ! , estaba haciendo todo con styles por que era para mostrar a una persona, a ver si le gustaba mas o menos el diseño y empesar una web. Se suponía que iba a ser algo rápido y por eso no use css, pero bueno.

Nos vemos ! gracias otra vez :)