CODEWITHSUNDEEP
htmlcss
Joe Smth
Joe Smth

Reputation: 5

How to set footer at the bottom of the page

This is the website I'm currently working on and my problem is that I can't seem to find a way in which to set the footer at the bottom of the page under all the elements. I want the footer to have a position:fixed, but for it to be under the next page element that is at the bottom of the page.

Some of the code:

#footer {
    clear: both;
    margin: 0 auto;
    position: fixed;
    text-align: center;
    bottom: 1%;
    height: 6%;
    width: 100%;
    padding: 2%;
    z-index: 500;
    background-color: rgba(0, 0, 0, 0.6);
}

.content {
    overflow: hidden;
    background-color: #ffffff;
    margin: 70px 0 0 0;
    }

.content-middle {
    float: left;
    width: 50%;
}

.content-left {
    float: left;
    width: 56%;
}

.content-right {
    float: right;
    width: 60%;
}

Upvotes: 0

Views: 108

Answers (3)

Sumit patel
Sumit patel

Reputation: 3903

Update Style using margin-bottom

   #pagination 
   {
    display: block;
    text-align: center;
    margin: 0 auto;
    clear: both;
    padding: 0.4% 0;
    background-color: rgb(255, 255, 255);
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 150px;
   }

Add remove White space then update style using height: auto !important;. because after your search result your li or class="reteta" set height:350px

#retete.simple-style li.reteta {
    width: 98%;
    max-width: 680px;
    min-width: 280px;
    height: auto !important;
    float: none;
    display: block;
    background: none;
    box-shadow: none;
}

or other wise only simple add style

#retete.simple-style li.reteta {        
        height: auto !important;
    }

Upvotes: 1

Rajesh Baskaran
Rajesh Baskaran

Reputation: 322

You can achieve this by adding a bottom: 0px; to footer

#footer {
clear: both;
margin: 0 auto;
position: fixed;
bottom: 0px
text-align: center;
bottom: 1%;
height:6%;
width: 100%;
padding:2%;
z-index:500;
background-color:rgba(0, 0, 0, 0.6);
}

The only diff is bottom:0px; .Try this

Upvotes: 0

Molarosa
Molarosa

Reputation: 69

You can achieve this by adding a margin-bottom: 90px; to #pagination.

#pagination {
  margin-bottom: 90px;
}

Upvotes: 0

Related Questions