footer div background color not displaying in browser-CodePudding

Even through the browser shows the css style in the sources, the background color is not displaying. Any thoughts?

.footer {
  list-style-type: none;
  margin: 20px;
  background-color: #009DDC;
}

<div >
  <li>&copy; Cedar Flute, 2022.</li>
  <li style="float:right">Web Design: Leagh Branner.</li>
</div>

CodePudding user response：

I think something like this might be closer to what you are looking for...

.footer {
  background-color: #009DDC;
  padding: 20px;
  display: block;
  overflow: hidden;
}

ul {
  list-style-type: none;
}

li {
  float: left;
  margin-right: 20px;
}

<div >
  <ul>
    <li>&copy; Cedar Flute, 2022.</li>
    <li>Web Design: Leagh Branner.</li>
  </ul>
</div>

CodePudding user response：

Have you linked the CSS file to the HTML file?

<head>
 <link rel = "stylesheet" href = "styles.css">
</head>

On Google Chrome, this code works fine for me. Try to add the entire file if there is more code there, as there may be a bug in the rest of the code.

CodePudding user response：

It worked fine for me. Are you sure you're CSS file is linked correctly? My file was in a CSS folder and I have this in the HTML head

<link rel="stylesheet" href="css/index.css">

CodePudding user response：

It would be better to use flexbox.

<ul >
    <li>&copy; Cedar Flute, 2022.</li>
    <li>Web Design: Leagh Branner.</li>
</ul>

.footer {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 20px;
  background-color: #009ddc;
}

If you still wanted to use float ( would recommend to switch to flexbox) -

<ul >
  <li style="float:right">Web Design: Leagh Branner.</li>
  <li>&copy; Cedar Flute, 2022.</li>
</ul>

.footer {
  list-style-type: none;
  margin: 20px;
  background-color: #009ddc;
  overflow: auto;
}

<ul >
    <li style="display:inline">&copy; Cedar Flute, 2022.</li>
    <li style="float:right;">Web Design: Leagh Branner.</li>
</ul>