1

Estoy intentando poner el footer en la parte de abajo de la pagina pero encuanto hay espacio suficiente, este se mueve a la derecha. introducir la descripción de la imagen aquí

Al reducir un poco el tamaño de la ventana ya se pone abajo: introducir la descripción de la imagen aquí

<footer class="pie-pagina">
<div class="rss">
    <img src="../img/twitter.png">
    <a href="https://twitter.com/alienware">Twitter</a>
    <img src="../img/instagram.png">
    <a href="https://www.instagram.com/alienware/?hl=en">Instagram</a>
    <img src="../img/youtube.png">
    <a href="https://www.youtube.com/c/alienwarechannel">Youtube</a>
    </div>
    <p>© 2020 Dell</p>
</footer>


footer {
    width: 100%;
    bottom: 0px;
}

footer div img {
    max-height: 200px;
}
3
  • Necesitas agregar el html completo porque no se puede ver si estás usando flex, o float, y en todo caso el tipo de posicionamiento.
    – Juan
    el 11 abr. 2020 a las 15:27
  • ¿Con qué posicionas con float o flexbox?
    – user128299
    el 11 abr. 2020 a las 15:32
  • @BetaM ambos, ya esta solucionado, el usuario Oscar me recomendo usar un clear y parece que funciono.
    – user165893
    el 11 abr. 2020 a las 15:37

2 respuestas 2

0

Eso ocurre por que a algún elemento anterior le habrás aplicado una propiedad

display: flex;
Esto signica que son elemento flotantes.

Si al elemento footer le aplicas

footer {
clear: both;
}

Esto hará que el elemento sea movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.

1
  • @BetaM Cuando puse "anterior", me refería a elementos que le preceden. el 11 abr. 2020 a las 15:37
0

La instrucción de bottom 0 será ignorada por:

  • Solo sirve para mover elementos cuyo posicionamiento es distinto a: static como por ejemplo: fixed o absolute en cualquier otro caso esa regla simplemente no desplazará al elemento

Otro detalle es que mencionas en los comentarios es que usas tanto float como flexbox para el acomodo entonces:

  • Con usar flexbox con una estructura similar a la siguiente debería alcanzar pues te va a permitir desplazar los elementos por alguno de los 2 ejes que lo componen:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        body {
          margin: 0;
        }
        main {
          display: flex;
          flex-direction: column;
        }
        header {
          height: 20vh;
        }
        section {
          height: 60vh;
        }
        footer {
          height: 20vh;
        }
      </style>
    </head>
    <body>
    <main>
      <header>Encabezado</header>
      <section>
        Sección y algo mas
      </section>
      <footer>
        Aquí finaliza
      </footer>
    </main>
    </body>
    </html>

  • Declaramos 3 secciones principales
  • Al contenedor le damos un display flex
  • Invertimos el acomodo pasando las secciones apiladas una sobre otra
  • Les damos un alto sobre el disponible del viewport y con esto logramos que el footer se mantenga posicionado abajo

Referencias

1
  • muy interesante, yo iba a sugerir algo muy rudimentario que es colocar las imágenes dentro de una tabla y footer en la base de la tabla, pero esto me parece mas elegante
    – Cesarin
    el 11 abr. 2020 a las 17:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.