Trying to align the footer, but it disappeared

Question

I'm trying to align divs with different widths in a footer on the website so it goes like this:

But when I tried to do it, all I saw was blank space. The footer totally disappeared.

Here is the HTML code:

    <div class="footer" >
            <div class="disclamer">
                <h3>Tite</h3>
                <hr>
                <p>Paragraph of text</p>
            </div>
            <div class="footerlogo">
            <img src="images/logo_footer.png" alt="Footer Logo" align="center" />
            </div>
            <div class="footerlinks">
                <h3>Links</h3>
                <hr>
                <div id="parentlink">
                    <div class="link1">
                        <ul>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                        </ul>
                    </div>
                    <div class="link2">
                        <ul>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="copyright">
            <p class="copy">&copy; Copyright</p>
            </div>
    </div>

And CSS

/* Footer */
.footer{
    height:211px;     
    width: 1200px;     
    position:fixed; 
    background-image: url('../images/footer.png');
    background-repeat:no-repeat;
    display: inline-block;
    overflow:hidden;
}
.disclamer{
    display: inline-block;     
    width:29%;     
    height:50px; 
    font-size: 12px !important;
    color: white;
    padding: 40px;
    padding-top: -20px;
}
.disclamer hr{
    width: 250px;
    margin-bottom: 10px;
}
.footerlogo{
    display: inline-block;     
    width:22%;     
    height:250px;
    margin-top: -30px;
}
.footerlinks{
    display: inline-block;  
    margin:0 auto;     
    height:50px;     
    width:32%; 
    color: white;
    padding: 40px;
    font-size: 12px !important;
}
.footerlinks a{
    color: white;
    text-decoration: none;
}
.footerlinks a:hover{
    text-decoration: underline;
}
.footerlinks hr{
    width: 250px;
    margin-bottom: 10px;
}
#parentlink{
    display: inline;
    width: 350px;
}
.link1{
    width: 129px;
}
.link2{
    position: relative;
    display: inline;
    margin-left: 130px;
    padding-right: -30px;
}
.copyright{
    width: 1200px !important;
    font-size: 12px !important;

}

Also I noticed, i have a container in which is nested another div which contains all other divs. I use the container to display a background, but for some reason when it comes to the footer, the background stops showing. I have the repeat-y for it, and its height is like 2000px. What could be the problem?

Answer 1

At the very least, when using position:fixed you need to specify what that fixed position is .

For example, to force this to the bottom of the window ( fixed is relative to the window, not the page content):

.footer{
  bottom: 0;
  left: 0;
  height:211px;     
  /* etc. */
}