Situar el footer SIEMPRE al final de la página

[Trueno2104]

Iniciado por herzbazi

prueba agregando position:relative;

Con eso conseguiría que estuviera siempre abajo, pero entonces si hay mucho contenido sería como ahora, que me lo tapa...

Que me siga siempre, sólo el menú superior.

Iniciado por iEnrique

De todas formas añade las etiquetas de HTML5 "<footer></footer>" y así el navegador que lo interpreta sabrá de lo que hablas...

Aunque no vaya a mejorar nada, hecho, por si acaso ;)

Iniciado por refielt

en realidad no es muy dificil, pero tu html esta mal casi en su totalidad, el modo correcto seria el siguiente.

Código CSS:

body,html{ height:100%; margin:0;}
    
#conteiner{min-height:100%; }
 
#content {
    width: 800px;
    margin:0 auto;
    position: relative;
    background: #CCC;
    margin-bottom:202px;
}
    
    
#header-top {
    height: 40px;
    width: auto;
    background: #6ec5ff;
    border-bottom: 3px solid #0099ff;
}
 
#footer {
    width: auto;
    height: 200px;
    
    margin-top:-200px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background: #333;
    border-top: 2px solid #000;
 
}
 

Código HTML:

<div id="conteiner">
        
            <div id="content">
                <div id="header-top"></div>
                <div id="search-content">
                contenidooooo
                </div>
                <div id="lateral">
                    <div id="favorites"></div>
                    <div id="lateral-publi"></div>
                </div>
            </div> 
            
        </div>
        <div id="footer"></div>
 

No he entendido casi nada de lo que has puesto. Porque me cuesta identificar el porqué de los cambios.

¿Por qué iba a utilizar width: auto si quiero uno que ocupe todo el ancho del navegador? ¿La capa "container" cierra antes o después del footer?

¿La propiedad box-sizing para qué es?

Gracias.