Joe Smth Joe Smth - 9 days ago 5
CSS Question

How to set footer at the bottom of the page

Ok, I know this question sounds kind of dull but hear me out. 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%;
}

Answer

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;
    }
Comments