Problema con propiedades de Divs

[kenproxd]

Iniciado por cristian_cena

hola kenproxd, creo que hablamos sobre tu duda en este tema.

Gracias por el link!
Intenté acomodarlo usando este ejemplo y me quedó de la siguiente manera:


(Esta imagen es la parte final del div wrapper hasta el footer).

Código CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
    margin: 0;
    background:#000  url(images/au_bg.jpg) center no-repeat fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.wrapper {
    padding-top: 30%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    z-index: 5;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 30px;
}
.push {
    height: 4em;
    background: #F00;
}
.footer {
    background:#dddddd;
    color:#9b9a9a;
    padding:10px 25px 10px 25px;
    overflow: hidden;
    clear: both;
}
 

Código HTML:

<div class="wrapper">
    
    <div style="float: left;">
       ...
    </div>
    <div class="...">...</div>
    <div class="...">
        ...
    </div>
    
    <div class="push"></div>
</div>
<div class="footer">
    ...
</div>
 

Al parecer la propiedad height: 100% del body ocaciona este tremendo espacio entre el wrapper y el footer.

El div push está de color rojo para poder distinguirlo y ver si funciona como debería.

Espero puedas seguir ayudandome :)

Iniciado por emprear

De comparar el código con las imágenes surge algo muy claro

#page no esta en top:45%
#page no tiene 80% de width, está al 100%
#page no tiene ningún height definido
y así varias cosas más, o tu css esta mal o las imágenes de referencia están mal, vas a tener que ser más preciso con tu planteo


Saludos

Gracias por el interés. Las imágenes de muestra las hice únicamente para explicar la superposición que ocurre entre un div y otro ya que tanto el ancho como la posición de #page no son el problema.