Footer disappears on my main page

Question

I've been working on this website and now I'm having a problem which consists of the fact that the footer keeps disappearing. It appears for a second when I reload the page and then it just disappears. I just for my footer to appear at the bottom of my page under pagination.

<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 id="sbutton"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 selected 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>

The CSS:

#footer {
    bottom: 0;
    clear: both;
    position: absolute;
    text-align: center;
    width: 96%;
    padding:2%;
    background-color:rgba(139, 140, 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;
    float:left;
    width:32%;
    text-align:left;
}
#footer #footer-col3 li.widget h2{
    font-size:14px;
    color:#ddd;
    padding:10px 0;
    margin:0 50px 10px 0;
    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:60%;}

Pagination:

#pagination {
    display:block;
        text-align:center;
    margin-bottom: 70px;
        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%;
    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;

}

I think there is php error, which is causing to not showing footer. — Hamza Zafeer, Nov 28 '16 at 15:12
On your website your footer is inside a html comment... that's something you can look at — Luuuud, Nov 28 '16 at 15:14
You've commented out your footer, if you remove the comments, it shows up? — Pete, Nov 28 '16 at 15:15
I'm voting to close this question as off-topic because the footer is commented out — Pete, Nov 28 '16 at 15:16
remove the float right on the main content, and remove the position fixed on the footer. — Millard, Nov 28 '16 at 15:18
@TomMillard I removed both of them and added `position:absolute`, but it still doesn't work — Johhny Sins, Nov 28 '16 at 15:23
Link:-http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height# — Razia sultana, Nov 28 '16 at 15:38
@JohhnySins if I go to the link you provided and then inspect an element then search for the footer div, it has been commented out. If I then edit those comments out, the footer shows up. If that is not what is causing the issue, then you need to create a [MCVE], but the vote to close still stands - either it is a simple fix in removing the comments, or you haven't provided us with an MCVE — Pete, Nov 28 '16 at 16:54

score 0 · Answer 1 · answered Nov 28 '16 at 15:18

0

Your footer is being overwrite. If you want a static stuck footer to the bottom of your window, edit your footer css and add z-index.

#footer {
bottom: 0;
clear: both;
position: absolute;
text-align: center;
width: 96%;
padding:2%;
background-color:rgba(139, 140, 0, 0.6);
z-index:1000;
}

answered Nov 28 '16 at 15:18

Sari Rahal

1,897
2
32
53

This works but it displays it at the bottom of the screen, not the bottom of the website – Johhny Sins Nov 28 '16 at 15:22
Then you need to close the main container div and place the footer at the bottom, you will also need to give it enough room to display. The code you are using, is used to give a fixed footer that overlays your site and it a fixed to the screen. Try a traditional footer where you have the
layout. – Sari Rahal Nov 28 '16 at 15:31

Razia sultana · Answer 2 · 2016-11-28T15:37:51.830

0

Try it:-

   #footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

edited Nov 28 '16 at 15:37

answered Nov 28 '16 at 15:24

Razia sultana

2,168
3
15
20

Ok i'll try to help you. – Razia sultana Nov 28 '16 at 15:35
Before I posted here I tried everything from the link you just posted – Johhny Sins Nov 28 '16 at 15:46

score 0 · Answer 3 · edited Nov 28 '16 at 21:06

0

Try this:

#footer {
    text-align: center;
    width: 96%;
    padding: 2%;
    background-color: rgba(139, 140, 0, 0.6);
    z-index: +1;
    position: fixed;
    bottom: 0;
}

edited Nov 28 '16 at 21:06

Brandon

4,491
6
38
59

answered Nov 28 '16 at 20:00

P Sebastian

28
1
10

Footer disappears on my main page

3 Answers3