-1

Tengo un footer compuesto por 2 contenedores divs. Me sucede que cuando coloreo el footer solo se colorean los divs, y mi idea es que se coloree todo el footer. Me parece raro que esto suceda ya que a la propiedad background-color la pongo en el footer, no en los divs.

Adjunto código:

HTML:

<footer id="footer">

  
  <div id="footer_logo">
    <img src="imagenes/marca-slogan.png" alt="logo footer" height="110" width="300" id="logo_footer">

    <p id="titulo_redes_sociales">Seguinos!</p>
    <img src="imagenes/facebook.svg"width="48" height="48" alt="Facebook" class="redes_sociales">
    <img src="imagenes/instagram.svg"width="45" height="45" alt="Instagram" class="redes_sociales">
    <img src="imagenes/twitter.svg"width="45" height="45" alt="Twitter" class="redes_sociales">
    <img src="imagenes/youtube.svg" width="45" height="45" alt="Youtube" class="redes_sociales">

  </div>

  <div id="footer_contacto">
    <p>
    <img src="imagenes/ubicacion.svg" height="50" width="50" id="ubicacion">Av. Capdevila 1735 - Córdoba - Argentina
    </p>
    <p>
    <img src="imagenes/telefono.svg" height="40" width="40" id="telefono">+54 351 3015 995
    </p>
    <p>
      <img src="imagenes/arroba.svg" width="50" height="50" id="arroba">[email protected]
    </p>

    <p>
    <a href="#">
    Políticas y privacidad
    </a>
    </p>
    <p>
    <a href="#">
    Términos y condiciones
    </a>
    </p>
  </div>

</footer>

CSS:

#footer{
    margin-bottom: 30px;
    background-color: #EFE3DE;

}

#footer_logo{
    float: left;
    margin-left: 160px;
    background-color: #EFE3DE;
}


#titulo_redes_sociales{
    font-family: "oxygen", sans-serif;
    font-size: 20px;
    padding-left: 110px;
    padding-bottom: 20px;

}

.redes_sociales{
    padding-left: 12px;
    padding-right: 12px;
}

#footer_contacto{
    float: right;
    margin-right: 150px;
    margin-bottom: 10px;
    font-family: "oxygen", sans-serif;
    background-color: #EFE3DE;
}


#footer_contacto img{
    vertical-align: middle;
    justify-content: left;
}

#footer_contacto a{
    text-decoration: none;
    color: black;
    font-family: Arial;
    text-decoration: underline;
    line-height: 30px;
    margin-top: 100px;

}

1
  • Esto tiene que ver con las dimensiones de los margenes y del contenedor. Si quieres que todo el footer se coloree puedes poner posición absolute y moverlo al comienzo de la pagina.
    – DABL03
    Commented el 7 ene. 2023 a las 1:23

1 respuesta 1

2

Cuando usas float el elemento sale del flujo normal del contenedor, por esto tu footer no tiene altura.

La solución simple es colocar un display:flex; al contenedor padre

footer{
  display:flex;
}

Demo:

#footer{
    margin-bottom: 30px;
    background-color: red;
display: flex;
}

#footer_logo{
    float: left;
    margin-left: 160px;
    background-color: #EFE3DE;
}


#titulo_redes_sociales{
    font-family: "oxygen", sans-serif;
    font-size: 20px;
    padding-left: 110px;
    padding-bottom: 20px;

}

.redes_sociales{
    padding-left: 12px;
    padding-right: 12px;
}

#footer_contacto{
    float: right;
    margin-right: 150px;
    margin-bottom: 10px;
    font-family: "oxygen", sans-serif;
    background-color: #EFE3DE;
}


#footer_contacto img{
    vertical-align: middle;
    justify-content: left;
}

#footer_contacto a{
    text-decoration: none;
    color: black;
    font-family: Arial;
    text-decoration: underline;
    line-height: 30px;
    margin-top: 100px;

}
<footer id="footer">

  
  <div id="footer_logo">
    <img src="imagenes/marca-slogan.png" alt="logo footer" height="110" width="300" id="logo_footer">

    <p id="titulo_redes_sociales">Seguinos!</p>
    <img src="imagenes/facebook.svg"width="48" height="48" alt="Facebook" class="redes_sociales">
    <img src="imagenes/instagram.svg"width="45" height="45" alt="Instagram" class="redes_sociales">
    <img src="imagenes/twitter.svg"width="45" height="45" alt="Twitter" class="redes_sociales">
    <img src="imagenes/youtube.svg" width="45" height="45" alt="Youtube" class="redes_sociales">

  </div>

  <div id="footer_contacto">
    <p>
    <img src="imagenes/ubicacion.svg" height="50" width="50" id="ubicacion">Av. Capdevila 1735 - Córdoba - Argentina
    </p>
    <p>
    <img src="imagenes/telefono.svg" height="40" width="40" id="telefono">+54 351 3015 995
    </p>
    <p>
      <img src="imagenes/arroba.svg" width="50" height="50" id="arroba">[email protected]
    </p>

    <p>
    <a href="#">
    Políticas y privacidad
    </a>
    </p>
    <p>
    <a href="#">
    Términos y condiciones
    </a>
    </p>
  </div>

</footer>

1
  • Ahh bien graciass no me imaginaba que era por el float
    – btmn_ctwmn
    Commented el 8 ene. 2023 a las 2:10

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.