HTML Footer on Bottom under all content

Question

Im trying to get my footer on the bottom of my page, i got the part where its on the bottom of my page, but now its overlapping with my content area called"portfolio list" this is what it looks like now:

As you can see is my footer overlapping the bottom part of my portfolio list. CSS part:

.container { 
    position: relative; 
    width: 1000px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
}
#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width:31%;
    margin:1%;
    display:none;
    float:left;
    overflow:hidden;
}

    .portfolio-wrapper {
        overflow:hidden;
        position: relative !important;
        background: #666;
        cursor:pointer;

    }

    .portfolio img {
        max-width:100%;
        position: relative;
    }

    .portfolio .label {
        position: absolute;
        width: 100%;
        height:40px;
        bottom:-40px;
    }

        .portfolio .label-bg {
            background: #121212;
            width: 100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
        }

        .portfolio .label-text {
            color:#fff;
            position: relative;
            z-index:500;
            padding:5px 8px;
        }

            .portfolio .text-category {
                display:block;
                font-size:9px;
            }


footer{
    position:absolute;

    bottom:0;
    width:100%;
    height:100px;   /* Height of the footer */
    background:#121212;

}

HTML:

<div id="portfoliolist">  
            <?php
                while($query->fetch()): 


                echo "<a href='post.php?id=$post_id'>"?>
            <div class="portfolio <?php echo $category?>" data-cat="<?php echo $category?>">
                <div class="portfolio-wrapper">          
                    <?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $image ).'" />';?>
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title"><?php echo $title?></a>
                                    <span class="text-category"><?php echo $category?></span>
                            </div>
                                <div class="label-bg"></div>
                        </div>
                </div>
            </div>
            <?php   echo "</a>";
                    endwhile;?>
            </div>

            <footer>
                <div class="footer-nav">
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">DeviantArt</a></li>
                    <li><a href="#">Behance</a></li>
                    <li><a href="#">LinkedIn</a></li>
                </ul>
                </div>
            </footer>

both of these div's are in my container. I hope someone can help me out!

Answer 1

Try it with footer { position: relative; } like Matej Đaković said. But it's also important, that #portfoliolist clears the float of .portfolio, otherwise #portfoliolist has no height.

#portfoliolist:after {
    content: ' ';
    display: block;
    clear: both;
}

Answer 2

You should set the position for the footer: position: fixed;and set the z-index: 9999; for the remaining part of the page without the footer. That way, the footer always stays on the bottom, with the rest of the page above it. Maybe you should set the margin bottom of the portfolio as the height of the footer. That should do it I think

Also set the position: relative; for the rest of the page. Here's the quick codepen I made http://codepen.io/oroborus357/pen/qdXdBw

Answer 3

try to use:

footer{
    position:absolute;
    bottom:0;
    right: 0;
    left:0; 
    height: 125px;
    background:#121212;
}

if not just add to your content (portfolio list) and set the bottom to the beginning of the footer so it will be bottom: 125px; or bottom: 126px;

{ position:absolute;
        bottom:125px;
        right: 0;
        left:0; 
}

Answer 4

Here is a very handy article for this type of questions.

Hope it helps!