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