Div no se despliegan del todo - Problema con Desbordamiento Overflow

loncho_rojas · #1 (**permalink**) 14/06/2010, 17:48

Hola, como estan, lo hago conciso y preciso.

Tengo un Div Contenedor que no se desborda segun el contenido, es decir, no se despliga del todo según la altura de los contenidos de manera automática.

Este es el CSS que empleo (por lo general no suelo tener problemas con esto)

Código CSS:

Ver original#container{
width:982px;
height:auto;
overflow:visible;
margin:0 auto;
}

como se vera en la imagen, es muy importante que se desborde, debido a que tampoco otro div llamado Contenidos sse desborda y requiere un desbordamiento (valga la redundancia), para fijar margenes entre las capas.. este es el div de Contenidos

Código CSS:

Ver original#contenidos{
width:980px;
height:auto;
overflow:visible;
/*el clear lo uso para limpiar unos float que tengo arriba*/
clear:both;
}

Si alguno sabe las posibles causas del no desbordamiento de los DIV les estaria muy agradecido (No se trata de adivinar, es por si ya tienen experiencia en algo similar)

Aca la vista para ilustrar, lo azul es el contenedor, como se ve, no toma todo el contenido, o no se despliega segun el alto total de la pagina, solo en los primeros div

Ante cualquier duda o sugerencia, estare por aqui..

Gracias de antemano

loncho_rojas · #2 (**permalink**) 14/06/2010, 18:20

por favor, alguien que tenga una vaga idea de porque no se desborda...

masterojitos · #3 (**permalink**) 14/06/2010, 18:23

muestra tu html para ver como lo estas poniendo y algun otro css si lo estas usando.

quizas tengas problemas si estas usando posiciones absolutas.... si todas son relativas... depende de como has estructurado tu html...

Suerte

loncho_rojas · #4 (**permalink**) 14/06/2010, 18:37

Ok.. no uso ningun tipo de posiciones.. es lo mas plano posible.. logre el desbordamiento del Contenedor, extrañamente usando OVERFLOW:AUTO;

lo que no logro es que el div contenidos se despliegue segun el contenido.. esta es la estructura HTML basica

Código HTML:

Ver original<body>
<div id="container">
 
 
    <div id="headTitle">
        Titulo
    </div>
        
    <div id="menuHeader">
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
    </div>
        
        
        <div id="logo">
             <a href="index.php">
             <img src="imagen.jpg" alt="logo ht center" width="347" height="114" title="Descripcion" />          </a>    
    </div>
            
    <div id="presentacion">
          <h1>Title<br />
          Title<br />
           </h1>
    </div>
    
    
    <!--Este es el Div que no se desborda o amplia -->
        <div id="contenidos">
                <div id="banner"><img src="banner.jpg" /></div>
                
                <div id="noticias">
                    <img src="images/title-noticias.gif" alt="Noticias y Novedades" width="220" height="29" />
                    
                    <div class="newsIndex">
                        
                            <h2>Curso de JAVA <br />
                            Inscripciones Abiertas
                            </h2>
                            <a href="#">Deseo enterarme</a>
                            <img src="images/linea-noticias.gif" alt="linea" />
                    </div>
</div>

en cuanto al CSS esto son las declaraciones que se van dentro del Div Contenido

Código CSS:

Ver original#contenidos{
    width: 980px;
    height:auto;
    overflow:auto;
    clear:both;
}
 
#banner{
width:641px;
height:400px;
float:left;
margin-top:35px;
margin-right:25px;
}
 
#noticias{
width:301px;
float:left;
padding-top:35px;
padding-left:6px;
}
 
 
 
.newsIndex{
width:300px;
margin-bottom:5px;
clear:both;
}

Thanks..

webosiris · #5 (**permalink**) 14/06/2010, 22:55

el div que no te toma es #contenidos.. si miras, verás que ese div tiene dentro 2 divs que están flotando. (banners y noticia) Debes limpiarlos.
Una manera elegante de hacerlo es asignarle overflow:hidden a #contenidos

PD: tienes css innecesario, como los height auto o los overflow visible