Problema CSS desarrollo Web

[FVG]

Hola amigos, ya no doy más por eso recurro a uds. a ver si alguien sabe y me puede ayudar... Por mas que he craneado y craneado, y buscando tutorial por tutorial no puedo lograr lo que quiero...

La cosa es que estoy empezando a hacerme una paginita pero tengo un problema de mierda con el footer... Quiero que el footer este al final de la página y con un ancho que sea igual al de la pantalla...sea cual sea la resolución de la pantalla, osea que sea líquido... Y cuando se achique la pantalla, el footer también lo haga hasta cierta medida. Practicamente lo he logrado, pero acá salta una falla de mierda...dentro del footer tengo dos divs, sin embargo al achicar el ancho del explorador, el footer se achica hasta que los dos divs se juntan, y si sigo achicando el explorador el div que está a la derecha (dentro del Footer), se sale del footer y pasa para abajo, queda fuera del footer bajo el div isquierdo, dejándome un espacio bajo el footer, wea horrible.

He tratado muchas cosas, html body height 100%, lo puse en auto y el body se adapta a la resolucion de la pantalla...etc.. en footer está en posición absoluta...
En el fondo esta todo como quiero excepto esa falla que da al achicar el explorador...

Acá les dejo la url para que pruebe el problema al achicar el ancho del explorador:

http://parentesis.host22.com/360

Espero puedan ayudarme...de todos modos les agradezco el solo hecho de leerme...
Eso, Saludos...

[C2am]

El problema que tiene es tan común que la solución tiene nombre y apellido. "limpiar los float"
Lee esto: http://www.librosweb.es/css_avanzado...ar_floats.html


Opcion1) Aplicas esto en el div del footer

Código CSS:

{overflow: hidden;}
 

Opción 2) creas un nuevo div debajo de isquierda y derecha, al que le aplicas la propiedad

Código CSS:

{clear: both;}
 

Claro, que debido a la posición absoluta y que tienes definido el alto, es probable que quede fuera de vista. Para ello deberías quitar la altura fija y reemplazarlo con un min-heigth.

Te sugiero que investigues mejores formas de lograr un "pie siempre abajo"

Saludos

[FVG]

Se agradece la buena intención perrito saludos, espero me funciones...

[jpa]

Iniciado por FVG

... y si sigo achicando el explorador el div que está a la derecha (dentro del Footer), se sale del footer y pasa para abajo, queda fuera del footer bajo el div isquierdo, dejándome un espacio bajo el footer, wea horrible....

El problema está en la altura del footer.

Código CSS:

#footer{
    ...
    height: 150px;
    ...
        }
 

Cuando la capa se 'adapta' y pasa a la parte de abajo (para dispositivos pequeños), el footer sigue en 150px de altura, por lo tanto el contenido 'se sale'

Si quieres hacer un diseño fluido que se adapte a distintas resoluciones huye de los px. Empieza a pensar con % y con em.

Para empezar puedes probar a poner height:auto; o min-height:150px;

Pero recuerda, en Responsive Web Design evita los pixeles y piensa en medidas relativas.

Yo te recomiendo que le eches un vistazo a algún framework como Fundation o Twitter Bootstrap (por ejemplo) para empezar. Te dan parte del trabajo hecho y se adaptan a cualquier proyecto.

[FVG]

UUff...vale perrito voy a ver como lo hago para dominar eso de los % en ves de px, gracias