Johhny Sins Johhny Sins - 14 days ago 8
CSS Question

Set the footer at the bottom of the website

I have a problem with the footer from my website. The thing is that it follows the screen which
I did with position:fixed, but I would want for it to be at the bottom of the website under the NEXT page button, how can I do that?





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

}

#footer p{padding:14px 0;margin: 0; color: #999; text-align:center; font-size:12px;}

#footer #footer-col3{
/*width:960px;*/
margin:0 auto;
overflow:hidden;
}
#footer #footer-col3 li.widget{
list-style-type:none;
display:inline;
margin-left: 2%;
float:left;
width:10%;;
text-align:left;
}

li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-334 a {
display: none;
}

#footer #footer-col3 li.widget h2{
font-size:14px;
margin-left: 2%;
color:#ddd;
border-bottom:1px dashed #555;
}
#footer #footer-col3 li.widget li {
list-style-type:none;
padding: 1px 0;
}
#footer #footer-col3 li.widget li a{
color:#bbb;
font-size:12px;
}
#footer #footer-col3 li.widget li a:hover{
color:#fff;
}
#footer #footer-col3 #social-icons-widget-2 {width:10%;margin-left: 2%;float:left;}
/*These are the next and previous buttons*/
#pagination {
display:block;
margin-bottom: -142px;
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;
}

#pagination a.pag-right {
border:1px solid #ddd;
padding:4px 8px;
color:#828282;
background-color: rgb(255, 255, 255);
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#pagination a,
#pagination span{
width:33%;
margin-bottom: 15%;
text-align:center;
font-size:1.2em;
text-transform:capitalize;
border:1px solid #ddd;
padding:4px 8px;
color:#828282;
background-color: rgb(255, 255, 255);
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
font-family:"Arial", sans-serif;
display:inline-block;
padding:0.5em 0;

}

<div id="footer">
<ul id="footer-col3">
<?php dynamic_sidebar('Footer 1'); ?>
<?php dynamic_sidebar('Footer 2'); ?>
<?php dynamic_sidebar('Footer 3'); ?>
</ul>
</div>

<style type="text/css">

#picture-side {

}

#picture-side label {
color: #ffffff;
}

#extra-search a {
margin-left: 2%;
}


#extra-wrap{
width:100%;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

#extra-search{width:100%}

select{
appearance:none; -moz-appearance:none; -webkit-appearance: none;
}

.styleselect {

margin-right: 2%;

margin-left: 2%;
background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
background-position: 117px center;
background-repeat: no-repeat;
overflow: hidden;
vertical-align: middle;
width: 140 px;
float:left;
padding: 0;
margin: 0;
display: inline-block;
}
.styleselect select {
background-color: transparent;
margin: 0 0 1px;
color: #ffffff;
padding: 4px;
float:left;
vertical-align: middle;
width: 140 px;
}
.styleselect select option{
background-color: #DFD3C3;
overflow: hidden;
vertical-align: middle;
width: 140 px;
padding: 0;
margin: 0;
float:left;
display: inline-block;
}

@media screen and (max-width: 980px) {
#to {display: none;}}


#picture-side1 label {
color: #ffffff;
}

#picture-side1{float:left;}

#picture-side2{float:left;}

#picture-side{float:left; margin-left: 2%; margin-right: 2%;}

#picture-side2 label {
color: #ffffff;
}


input[type="radio"]:checked+label{ border-bottom: 2px solid red; }

.site-wrap {
display: none;
}
#picture {
visibility: hidden;
}

#picture2 {
visibility: hidden;
}

#video {
visibility: hidden;
}


#searchF label {
height:40px; line-height:40px; text-align:center;
margin-left: 2%;
color: #ffffff;

}

#picture-side2 label {
margin-right: 2%;
}



#to {
margin-left: 2%;
margin-right: 2%;
float: left;
z-index: 10;
border-radius: 10px;
background-color: rgb(255, 255, 255);
color: #8a298a;
}

</style>

<div id="topbar">
<div class="width-container">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="search">
<form action="<?php bloginfo('url');?>/tech" method="GET" id="searchF">
<!--<input type="hidden" name="page" value="<?php if(isset($_GET["page"])){echo $_GET["page"];} else {echo '1';} ?>">-->
<?php
$searched_term = get_query_var('recipe_search');

if (empty($searched_term)) {
$searched_term = isset($_GET["search"]) ? $_GET["search"] : "";
}
?>
<input id="sfield" type="text" name="search" placeholder="Keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>>
<input type="submit" value="Search" onClick="check()">



</div>

<div id="extra-wrap">
<div id="extra-search">
<div id="picture-side">

<input type="radio" name="images" value="1" id="picture"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">Pictures</label>
</div>

<div id="picture-side1">

<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">No Pictures</label>
</div>

<div id="picture-side2">

<input type="radio" name="images" value="0" id="video"
<?php if(isset($_GET["video"]) && $_GET["video"]=='1'){ echo 'checked';} ?>><label for="video">Video</label>
</div>
<div id="time-side">
<!--<small>Published time</small>-->
<input type="text" id="to" name="to" placeholder="Any time">
</div>



<div class="styleselect">
<select data-placeholder="Select a Category" name="cat" id="cat" class="select2" multiple >
<option value="all">All Categories</option>
<option value="EN">England</option>
<option value="GR">Greece</option>
<option value="US">USA</option>
<option value="IT">Italy</option>
</select>
</div>

<a href="http://www.onetechsearch.com/tech/category/IT/?search=&images=1&to=&cat=IT&popular">Most Popular</a>


</div>
</div>
</div>
</form>
</div>
<div id="footer">
<ul id="footer-col3">
<?php dynamic_sidebar('Footer 1'); ?>
<?php dynamic_sidebar('Footer 2'); ?>
<?php dynamic_sidebar('Footer 3'); ?>
</ul>
</div>




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