Can't get a background color to work in CSS

Question

I'm trying to color a footer but it won't appear. I've noticed that if I remove either the "bottom-left" or "bottom-right" class, the list will be colored but it gets out of position. I need to keep it at the bottom and color the whole bottom row. Also, since there are other lists in the webpage, I can't alter the properties of all "li's" like every google search suggested.

HTML:

<footer id="footer">
<ul>
    <div>
        <span class="bottom-left">
            <li><a href="pages/advertising.html" class="bottom-font">Advertising</a></li>

            <li><a href= "pages/business.html" class="bottom-font">Business</a></li>

            <li><a href="pages/how-search-works.html" class="bottom-font"
            >How Search works</a></li>
        </span>
        
        <span class="bottom-right">
            <li><a href="pages/privacy.html" class="bottom-font">Privacy</a></li>

            <li><a href="pages/terms.html" class="bottom-font">Terms</a></li>

            <li><a href="pages/settings.html" class="bottom-font">Settings</a></li>
        </span>
    </div>
</ul>
</footer>

CSS:

.bottom-font {
    font-size: 14px;
    color: #5f6368;
    line-height: 20px;
    word-spacing: 1px;
}

.bottom-right {
   position: absolute;
   bottom: 0px;
   right: 0px; 
   margin-right: 27px;
}

.bottom-left {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin-left: 27px;
 }

 #footer{
     background: black;
 }

Answer 1

you had no width or height set for your container.

I fixed it.check on codepen: codepen

.bottom-font {
    font-size: 14px;
    color: #5f6368;
    line-height: 20px;
    word-spacing: 1px;
}

.bottom-right {
   position: absolute;
   bottom: 10px;
   right: 0px; 
   margin-right: 27px;
}

.bottom-left {
    position: absolute;
    bottom: 10px;
    left: 0px;
    margin-left: 27px;
 }


#footer{
   
   position: absolute;/*fixed would work here also*/
   bottom: 0;
   height: 5rem;
   width: 100%;
   background: black;
   padding-bottom: 10px;
}
ul {
  height: inherit;
  width: auto;
  margin: 0;
}

and in regards to your invalid html structure (ul/li) check this thread can-i-use-div-as-a-direct-child-of-ul

Answer 2

You should rather update your HTML to this. You cannot have other elements inside one ul

<footer id="footer">

    <div class="bottom-left">
        <ul>
            <li><a href="pages/advertising.html" class="bottom-font">Advertising</a></li>

            <li><a href= "pages/business.html" class="bottom-font">Business</a></li>

            <li><a href="pages/how-search-works.html" class="bottom-font"
            >How Search works</a></li>
         </ul>   
    </div>
        
    <div class="bottom-right">
        <ul>
            <li><a href="pages/privacy.html" class="bottom-font">Privacy</a></li>

            <li><a href="pages/terms.html" class="bottom-font">Terms</a></li>

            <li><a href="pages/settings.html" class="bottom-font">Settings</a></li>
       </ul>
    </div>

</footer>

Answer 3

Try to add footer

#footer{
     background: black;
     position: absolute;
     height: 100px;
     bottom: 0;
     left:0;
     right:0;
     color:#fff;
 }

And make html format correctly,

<footer id="footer">
  <div>
      <span class="bottom-left">
         <ul>
            <li><a href="pages/advertising.html" class="bottom-font">Advertising</a></li>

            <li><a href= "pages/business.html" class="bottom-font">Business</a></li>

            <li><a href="pages/how-search-works.html" class="bottom-font"
            >How Search works</a></li>
          </ul>
        </span>

        <span class="bottom-right">
          <ul>
            <li><a href="pages/privacy.html" class="bottom-font">Privacy</a></li>

            <li><a href="pages/terms.html" class="bottom-font">Terms</a></li>

            <li><a href="pages/settings.html" class="bottom-font">Settings</a></li>
          </ul>
      </span>
  </div>
</footer>

Working Demo

.bottom-font {
    font-size: 14px;
    color: #5f6368;
    line-height: 20px;
    word-spacing: 1px;
}

.bottom-right {
   position: absolute;
   bottom: 0px;
   right: 0px; 
   margin-right: 27px;
}

.bottom-left {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin-left: 27px;
 }

 #footer{
     background: black;
     position: absolute;
     height: 100px;
     bottom: 0;
     left:0;
     right:0;
     color:#fff;
 }

<footer id="footer">
  <div>
      <span class="bottom-left">
         <ul>
            <li><a href="pages/advertising.html" class="bottom-font">Advertising</a></li>

            <li><a href= "pages/business.html" class="bottom-font">Business</a></li>

            <li><a href="pages/how-search-works.html" class="bottom-font"
            >How Search works</a></li>
          </ul>
        </span>

        <span class="bottom-right">
          <ul>
            <li><a href="pages/privacy.html" class="bottom-font">Privacy</a></li>

            <li><a href="pages/terms.html" class="bottom-font">Terms</a></li>

            <li><a href="pages/settings.html" class="bottom-font">Settings</a></li>
          </ul>
      </span>
  </div>
</footer>

Answer 4

I have prepared a leaner solution for you. Please read the comments, the priority here is to understand how flexbox works. Also, I suggest reading on it as much as possible, it is very useful and responsive.

Useful resources that helped me when I started:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

footer li a {  /* this selector targets the links <a> in each <li> and all properties will apply to all of them so you don't separate classes to apply to each li or a */
    font-size: 14px;
    color: #5f6368;
    line-height: 20px;
    word-spacing: 1px;
}
 footer {
     position:absolute;bottom:0; /*this positions the footer at the bottom */
     background: black;width:100%; /*here your black background and your width of 100% of the screen width */
     display:flex;justify-content:space-between;} /* flex display automatically positions your elements in respect of the rules you add, i.e. here justify-content:space-between so no need for right of left margins of 27px and things like that PLUS it's fully responsive*/

<footer>
  <!-- removed "footer" ID you don't need to specify an ID for the footer element you can simply call it footer in your CSS -->
  <ul>
    <li><a href="pages/advertising.html">Advertising</a></li>
    <li><a href= "pages/business.html">Business</a></li>
    <li><a href="pages/how-search-works.html">How Search works</a></li>
  </ul>
  <ul>
    <li><a href="pages/privacy.html">Privacy</a></li>
    <li><a href="pages/terms.html">Terms</a></li>
    <li><a href="pages/settings.html">Settings</a></li>
  </ul>
</footer>

Answer 5

You need to position your foot on the bottom of the page. Since you gave it no width and height, it didn't show up.

.bottom-font {
    font-size: 14px;
    color: #5f6368;
    line-height: 20px;
    word-spacing: 1px;
}

.bottom-right {
   position: absolute;
   bottom: 0px;
   right: 0px; 
   margin-right: 27px;
}

.bottom-left {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin-left: 27px;
 }

 #footer{
     background: black;
     position: absolute;
     height: 80px;
     width: 100%;
     bottom: 0;
 }

<footer id="footer">
<ul>
    <div>
        <span class="bottom-left">
            <li><a href="pages/advertising.html" class="bottom-font">Advertising</a></li>

            <li><a href= "pages/business.html" class="bottom-font">Business</a></li>

            <li><a href="pages/how-search-works.html" class="bottom-font"
            >How Search works</a></li>
        </span>
        
        <span class="bottom-right">
            <li><a href="pages/privacy.html" class="bottom-font">Privacy</a></li>

            <li><a href="pages/terms.html" class="bottom-font">Terms</a></li>

            <li><a href="pages/settings.html" class="bottom-font">Settings</a></li>
        </span>
    </div>
</ul>
</footer>