Trying to align the footer, but it disappeared - html

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>&#9654 &nbsp Link</li>
<li>&#9654 &nbsp Link</li>
</ul>
</div>
<div class="link2">
<ul>
<li>&#9654 &nbsp Link</li>
<li>&#9654 &nbsp Link</li>
</ul>
</div>
</div>
</div>
<div class="copyright">
<p class="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. */
}