0

I'm working on a simple template for a web page. On a large screen, my page looks like this:

![1] https://i.stack.imgur.com/6JQBr.jpg

On a small screen it looks like this:

![2] https://i.stack.imgur.com/s62rv.jpg

And, as I show in the image, the background of the footer disappears.

Here are my HTML and CSS codes:

body {
  background-color: #bccedc;
}

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* === HEADER === */

#header {
  height: 50px;
  background-color: #99ccff;
}

#header h1 {
  text-align: center;
  margin: auto;
  padding-top: 10px;
  font-size: 25px;
  color: #3a3a3a;
  text-transform: uppercase;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#middle {
  display: flex;
  /* Align sidebar with main */
}


/* === SIDEMENU === */

#sidebar {
  float: left;
  width: 20%;
  background-color: #00cc00;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#sidebar ul {
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
}

#sidebar li {
  margin-top: 10px;
}

#sidebar a:link,
a:visited {
  text-decoration: none;
  color: #12366d;
}

#sidebar a:hover {
  color: white;
}

#sidebar a:active {
  color: yellow;
}


/* === MAIN === */

#main {
  min-height: 500px;
  float: left;
  width: 85%;
  background-color: #ffff99;
}

#main h2 {
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  color: #373737;
}

#main h3 {
  font-family: 'Century Gothic', 'Futura', sans-serif;
  padding-left: 20px;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
}

#main p {
  text-align: justify;
  margin: 20px;
  font-family: 'Calibri', 'Arial', sans-serif;
}

#main ul {
  padding-left: 70px;
  list-style-image: url(bullet.png);
}

#main ol {
  padding-left: 70px;
}

#main dt {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  font-weight: bold;
  padding-left: 40px;
}

#main li,
dd {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  margin-right: 30px;
}

#main table,
th,
td {
  border: 2px solid #003e80;
  border-collapse: collapse;
  height: 40px;
}

#main table {
  text-align: center;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 550px;
  font-family: 'Calibri', 'Arial', sans-serif;
  caption-side: bottom;
}

#main th {
  background-color: #99ccff;
  font-size: 20px;
  color: #e6f2ff;
}

#main td {
  background-color: #e6f2ff;
}

#main td:hover {
  background-color: white;
}

#main caption {
  font-style: italic;
  color: #003e80;
}


/* === FOOTER === */

#footer {
  height: 30px;
  padding-top: 20px;
  background-color: #99ccff;
}

#footer>p {
  margin: auto;
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  font-size: 14px;
}


/* === RESPONSIVE === */

@media only screen and (max-width: 850px) {
  #content {
    width: 600px;
  }
  #sidebar {
    width: 25%;
  }
  #main table {
    width: 400px;
  }
}

@media only screen and (max-width: 650px) {
  #content {
    width: 450px;
  }
  #middle {
    display: initial;
  }
  #sidebar {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #sidebar ul {
    margin-left: 30px;
  }
  #sidebar li {
    float: left;
    margin: 10px;
  }
  #main {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Hello World</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="content">
    <div id="header">
      <h1>title</h1>
    </div>
    <div id="middle">
      <div id="sidebar">
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="lists.html">Link 1</a></li>
          <li><a href="tables.html">Link 2</a></li>
          <li><a href="imgs.html">Link 3</a></li>
        </ul>
      </div>
      <div id="main">
        <h2>Main body</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div id="footer">
      <p>Footer is here</p>
    </div>
  </div>
</body>

</html>

I searched on the Internet for a solution but nothing helped me. Can someone please tell me what exactly is the problem and how do I solve it?

Johannes
  • 64,305
  • 18
  • 73
  • 130
sgt_esgiti
  • 3
  • 2
  • Setting the `background-color` on the `footer > p` will fix the disappearing colour problem. If you use the Chrome web-elements inspector you'll see some columns not expanding the way you intended. I guess you'll need to debug that so the `body` will get an actual size. That problebly fixes the background issue as well – 0stone0 Oct 16 '19 at 16:00

1 Answers1

1

That's because your #main element is floated. That way the position of the footer itself "officially" is right under the header, since floated elements are not wrapped by their parent elements by default. (check in the browser tools)

Add clear: both; to the footer's CSS to fix that:

body {
  background-color: #bccedc;
}

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* === HEADER === */

#header {
  height: 50px;
  background-color: #99ccff;
}

#header h1 {
  text-align: center;
  margin: auto;
  padding-top: 10px;
  font-size: 25px;
  color: #3a3a3a;
  text-transform: uppercase;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#middle {
  display: flex;
  /* Align sidebar with main */
}


/* === SIDEMENU === */

#sidebar {
  float: left;
  width: 20%;
  background-color: #00cc00;
  font-family: 'Century Gothic', 'Futura', sans-serif;
}

#sidebar ul {
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
}

#sidebar li {
  margin-top: 10px;
}

#sidebar a:link,
a:visited {
  text-decoration: none;
  color: #12366d;
}

#sidebar a:hover {
  color: white;
}

#sidebar a:active {
  color: yellow;
}


/* === MAIN === */

#main {
  min-height: 500px;
  float: left;
  width: 85%;
  background-color: #ffff99;
}

#main h2 {
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  color: #373737;
}

#main h3 {
  font-family: 'Century Gothic', 'Futura', sans-serif;
  padding-left: 20px;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
}

#main p {
  text-align: justify;
  margin: 20px;
  font-family: 'Calibri', 'Arial', sans-serif;
}

#main ul {
  padding-left: 70px;
  list-style-image: url(bullet.png);
}

#main ol {
  padding-left: 70px;
}

#main dt {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  font-weight: bold;
  padding-left: 40px;
}

#main li,
dd {
  font-family: 'Calibri', 'Arial', sans-serif;
  text-align: justify;
  margin-right: 30px;
}

#main table,
th,
td {
  border: 2px solid #003e80;
  border-collapse: collapse;
  height: 40px;
}

#main table {
  text-align: center;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 550px;
  font-family: 'Calibri', 'Arial', sans-serif;
  caption-side: bottom;
}

#main th {
  background-color: #99ccff;
  font-size: 20px;
  color: #e6f2ff;
}

#main td {
  background-color: #e6f2ff;
}

#main td:hover {
  background-color: white;
}

#main caption {
  font-style: italic;
  color: #003e80;
}


/* === FOOTER === */

#footer {
  height: 30px;
  padding-top: 20px;
  background-color: #99ccff;
  clear: both;
}

#footer>p {
  margin: auto;
  text-align: center;
  font-family: 'Century Gothic', 'Futura', sans-serif;
  font-size: 14px;
}


/* === RESPONSIVE === */

@media only screen and (max-width: 850px) {
  #content {
    width: 600px;
  }
  #sidebar {
    width: 25%;
  }
  #main table {
    width: 400px;
  }
}

@media only screen and (max-width: 650px) {
  #content {
    width: 450px;
  }
  #middle {
    display: initial;
  }
  #sidebar {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #sidebar ul {
    margin-left: 30px;
  }
  #sidebar li {
    float: left;
    margin: 10px;
  }
  #main {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Hello World</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="content">
    <div id="header">
      <h1>title</h1>
    </div>
    <div id="middle">
      <div id="sidebar">
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="lists.html">Link 1</a></li>
          <li><a href="tables.html">Link 2</a></li>
          <li><a href="imgs.html">Link 3</a></li>
        </ul>
      </div>
      <div id="main">
        <h2>Main body</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div id="footer">
      <p>Footer is here</p>
    </div>
  </div>
</body>

</html>
Johannes
  • 64,305
  • 18
  • 73
  • 130