'CSS: how to add background but not only in the text

I'm making a copy of the page of Google as a school project and i'm trying to set up the background color of the last part of the footer but it's only filling the color around the letters, how I can fill the whole part of background there?

p {
  padding: 15px 30px;
  font-size: 15px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #f2f2f2;
  color: #70757a;
  display: block;
}

.izq,
.der {
  font-size: 14px;
  color: #70757a;
  margin-block-end: 10px;
  background-color: #f2f2f2;
}

.izq {
  margin-left: 40px;
  float: left;
}

.der {
  margin-right: 40px;
  float: right;
}
<footer>
  <div>
    <p>México</p>
  </div>
  <div id="abajo"><a href="https://about.google/?utm_source=google-MX&utm_medium=referral&utm_campaign=hp-footer&fg=1" class="izq">Sobre Google</a>
    <a href="https://ads.google.com/intl/es-419_mx/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1" class="izq">Publicidad</a>
    <a href="https://smallbusiness.withgoogle.com/intl/es-419_mx/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=ww-ww-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u&c=MX#!/" class="izq">Negocios</a>
    <a href="https://www.google.com/search/howsearchworks/?fg=1" class="izq">Cómo funciona la Búsqueda</a>
    <a href="https://policies.google.com/privacy?hl=es-419&fg=1" class="der">Privacidad</a>
    <a href="https://policies.google.com/terms?hl=es-419&fg=1" class="der">Condiciones</a>
    <a href="" class="der">Preferencias</a> </div>
</footer>
cssbackground-colorfooter


Solution 1:[1]

Hey I'm still learning this stuff but try this CSS?

I think the float:left under .izq was messing with it.

footer {
  background-color: #f2f2f2;
}

p {
  padding: 15px 30px;
  font-size: 15px;
  border-bottom: 1px solid #f2f2f2;
  color: #70757a;
  display: block;
}

.izq,
.der {
  font-size: 14px;
  color: #70757a;
  margin-block-end: 10px;
}

.izq {
  margin-left: 40px;
}

.der {
  margin-right: 40px;
  float: right;
}
<footer>
  <div>
    <p>México</p>
  </div>
  <div id="abajo"><a href="https://about.google/?utm_source=google-MX&utm_medium=referral&utm_campaign=hp-footer&fg=1" class="izq">Sobre Google</a>
    <a href="https://ads.google.com/intl/es-419_mx/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1" class="izq">Publicidad</a>
    <a href="https://smallbusiness.withgoogle.com/intl/es-419_mx/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=ww-ww-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u&c=MX#!/" class="izq">Negocios</a>
    <a href="https://www.google.com/search/howsearchworks/?fg=1" class="izq">Cómo funciona la Búsqueda</a>
    <a href="https://policies.google.com/privacy?hl=es-419&fg=1" class="der">Privacidad</a>
    <a href="https://policies.google.com/terms?hl=es-419&fg=1" class="der">Condiciones</a>
    <a href="" class="der">Preferencias</a> </div>
</footer>

Solution 2:[2]

You need to add a height to div id="abajo" and then add a background to that. If you don't want any margin between the top part and the bottom part, add margin-block-end: 0px; to the p css. I changed the background to be a little darker so it is easier to see. Also, if this is viewed on a smaller screen, part of the footer will pop out of the bottom.

p {
  padding: 15px 30px;
  font-size: 15px;
  background-color: #bbb;
  color: #70757a;
  display: block;
  margin-block-end: 0px;
}
.izq, .der {
  font-size: 14px;
  color: #70757a;
  margin-block-end: 10px;
}
.izq {
  margin-left: 40px;
  float:left;
}
.der {
  margin-right: 40px;
  float: right;
}
#abajo {
  height: 25px;
  background: #bbb
}
<footer>
  <div id="asdf"><p>México</p></div>
  <div id="abajo">
    <a href="https://about.google/?utm_source=google-MX&utm_medium=referral&utm_campaign=hp-footer&fg=1" class="izq">Sobre Google</a>
    <a href="https://ads.google.com/intl/es-419_mx/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1" class="izq">Publicidad</a>
    <a href="https://smallbusiness.withgoogle.com/intl/es-419_mx/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=ww-ww-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u&c=MX#!/" class="izq">Negocios</a>
    <a href="https://www.google.com/search/howsearchworks/?fg=1" class="izq">Cómo funciona la Búsqueda</a>
    <a href="https://policies.google.com/privacy?hl=es-419&fg=1" class="der">Privacidad</a>
    <a href="https://policies.google.com/terms?hl=es-419&fg=1" class="der">Condiciones</a>
    <a href="" class="der">Preferencias</a>
  </div>
</footer>

Solution 3:[3]

Use inline-block with background-color to footer

footer {
      display: inline-block;
      width:100%;
      background: #bbb;
    }
  • This one makes it responsive to fill all background of content,even if it stacks below,as no specific height is gave

p {
  padding: 15px 30px;
  font-size: 15px;
  background-color: #bbb;
  color: #70757a;
  display: block;
  margin-block-end: 0px;
}
.izq, .der {
  font-size: 14px;
  color: #70757a;
  margin-block-end: 10px;
}
.izq {
  margin-left: 40px;
  float:left;
}
.der {
  margin-right: 40px;
  float: right;
}
footer {
  display: inline-block;
  width:100%;
  background: #bbb;
}
<footer>
  <div id="asdf"><p>México</p></div>
  <div id="abajo">
    <a href="https://about.google/?utm_source=google-MX&utm_medium=referral&utm_campaign=hp-footer&fg=1" class="izq">Sobre Google</a>
    <a href="https://ads.google.com/intl/es-419_mx/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1" class="izq">Publicidad</a>
    <a href="https://smallbusiness.withgoogle.com/intl/es-419_mx/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=ww-ww-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u&c=MX#!/" class="izq">Negocios</a>
    <a href="https://www.google.com/search/howsearchworks/?fg=1" class="izq">Cómo funciona la Búsqueda</a>
    <a href="https://policies.google.com/privacy?hl=es-419&fg=1" class="der">Privacidad</a>
    <a href="https://policies.google.com/terms?hl=es-419&fg=1" class="der">Condiciones</a>
    <a href="" class="der">Preferencias</a>
  </div>
</footer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sanj
Solution 2 ajarrow
Solution 3

Related Questions