Question 45267 in Html Question posted in
Some basic documentation can be found here.

How could i get the issue with my footer fixed? – Html

Hello everyone I am pretty new to HTML and CSS is there any way for me to make the background of this footer be over the whole footer and not that one bit. I tried a few things but is will over lap the contact forum for a small part but it is pretty annoying that I cant find out how to solve this problem
Picture of the page

.footer,
.push {
  height: 50px;
}

.footer {
  background: #000f14 !important;
  padding: 20px !important;
  text-align: center !important;
  position: absolute !important;
  bottom: 0 !important;
  margin-top: 50px;
  width: 100% !important;
}

.column {
  display: inline-block;
  width: 25%;
  vertical-align: top;
  text-align: left;
  margin: 0 2.5%;
  margin-top: 15px;
  background: #000f14;
}

.column h3 {
  margin-top: 0;
  margin-bottom: 10px;
  background: #000f14;
  font-size: 25px;
}

.column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #000f14;
}

.column ul li {
  padding: 5px 0;
  background: #000f14;
  font-size: 15px;
}

.column p {
  margin: 0;
  background: #000f14;
  font-size: 15px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="footer-placeholder">
    <div class="footer">
      <div class="column">
        <h3>Contact Information</h3>
        <ul>
          <li>1234 Example Street</li>
          <li>Example City, XX 12345</li>
          <li>Phone: (555) 555-5555</li>
          <li>Email: [email protected]</li>
        </ul>
      </div>
      <div class="column">
        <h3>Services</h3>
        <ul>
          <li>Web Design</li>
          <li>Graphic Design</li>
          <li>Marketing</li>
          <li>SEO</li>
        </ul>
      </div>
      <div class="column">
        <h3>Trademark</h3>
        <p>&copy; 2023 AquaTech. All rights reserved.</p>
      </div>
    </div>
  </div>
</body>

</html>
Tags:

3

Answers


  1. 0 
    .footer,
.push {
  height: 100%;
}

    With this basically you tell your element with footer class that take the full height of its child elements.

    Login or Signup to reply.
  2. 0

    You need to add the height in the class
    .footer { height: auto }
    And to make the content of footer visible add color in the class
    .column{color: white}

    The final look of your both CSS classes will be as below;

    .footer { background: #000f14 !important; padding: 20px !important; text-align: center !important; position: absolute !important; bottom: 0 !important; margin-top: 50px; width: 100% !important;height:auto; }

    .column { display: inline-block; width: 25%; vertical-align: top; text-align: left; margin: 0 2.5%; margin-top: 15px; background: #000f14; color:white;}

    Besides, you can also have a look at the link below to see the solution visually: TestWise Replay| fixed the footer height

    Login or Signup to reply.
  3. 0

    Simply add height: auto; to the .footer CSS selector.

    Improvements suggestions:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search