CODEWITHSUNDEEP
htmlcss
Jacob Moore
Jacob Moore

Reputation: 277

How to make this list stay at the bottom of the page?

Want this to be at the bottom of my page. No blank space beneath it. I'm a little confused as the normal CSS to make text stay at the bottom wont work here.

    .footer li{
      display:inline;
    }
    <footer>
    <div class="footer">
    <ul style="float:left;list-style-type:none;">
          <li>Advertising</li>
          <li>Business</li>
          <li>About</li>
       </ul>
    
       <ul style="float:right;list-style-type:none;">
          <li>Privacy</li>
          <li>Terms</li>
          <li>Settings</li>
       </ul>
    </div>
    </footer>

Upvotes: 0

Views: 1136

Answers (2)

cs95
cs95

Reputation: 402493

This should do it. Fix the footer using position: fixed; and set bottom: 0px; to fix it to the bottom of the page.

.footer {
  position: fixed;
  bottom: 0px;
  width:90%;
}

.footer li{
  display:inline;
}
 
    <p>Some text here</p>
    <footer>
    <div class="footer">
    <ul style="float:left; list-style-type:none;">
          <li>Advertising</li>
          <li>Business</li>
          <li>About</li>
       </ul>
    
       <ul style="float:right;list-style-type:none;">
          <li>Privacy</li>
          <li>Terms</li>
          <li>Settings</li>
       </ul>
    </div>
    </footer>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

What you're looking for is a "sticky" footer, since you don't want it fixed to the bottom of the viewport all of the time and just want it to always be at the bottom of the page.

The easiest/modern way to do this is to use a flex container and set the footer to margin-top: auto so it will push itself to the bottom of the container. Set the container to min-height: 100vh; and the footer will always be at the bottom of the page.

.footer li{
  display:inline;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
footer {
margin-top: auto;
}
<nav>nav</nav>
<main>main</main>
<footer>
    <div class="footer">
    <ul style="float:left;list-style-type:none;">
          <li>Advertising</li>
          <li>Business</li>
          <li>About</li>
       </ul>
    
       <ul style="float:right;list-style-type:none;">
          <li>Privacy</li>
          <li>Terms</li>
          <li>Settings</li>
       </ul>
    </div>
</footer>

Another way to do it is to assign a height to footer, and absolutely position it at the bottom of the window, and add padding to body that matches the height of the footer

.footer li{
  display:inline;
}
body {
box-sizing: border-box;
padding-bottom: 50px;
margin: 0;
min-height: 100vh;
position: relative;
}
footer {
height: 50px;
position: absolute;
bottom: 0; left; 0; right: 0;
}
<nav>nav</nav>
<main>main</main>
<footer>
    <div class="footer">
    <ul style="float:left;list-style-type:none;">
          <li>Advertising</li>
          <li>Business</li>
          <li>About</li>
       </ul>
    
       <ul style="float:right;list-style-type:none;">
          <li>Privacy</li>
          <li>Terms</li>
          <li>Settings</li>
       </ul>
    </div>
</footer>

Upvotes: 0

Related Questions