Currently, I am teaching myself web development and reconstructing a website from scratch. The layout should resemble the following:
===========Navigation Bar===========
=========Website Content===========
===========Footer #1============
===========Footer #2============
The basic code structure I have used is:
<body class="main-body">
<form id="form1">
<footer id="footerContainer">
<div class="ContainerBlock">
<section class="big-blue">
<div class="Container">
<div class="rows">
<div>(columns)</div>
<div>(columns)</div>
<div>(columns)</div>
<div>(columns)</div>
</div>
</div>
</section>
<section class="copyrights">
<div class="container">
<div class="rows">
<div>
<small>copyright text</small>
</div>
<div>
<a href="a link!!!">
<img alt="image" src="image"/>
</a>
</div>
</div>
</div>
</section>
</div>
</footer>
</form>
</body>
Footer 1 consists of page links in columns, while footer 2 includes a copyright message and interactive images. Footer 1 is a solid blue block that should sit on top of a solid white block.
I have experimented with different CSS positions:
.footer
{
position: absolute;
bottom:0;
}
.footer
{
position: relative;
bottom:0;
}
.footer
{
position: fixed;
bottom:0;
}
#footer
{
position: absolute;
bottom:0;
}
I have adjusted section and footer positions, modified padding values, but the footers remain centered on the page. Setting both footers to:
position:relative;
bottom: 0;
causes footer 1 to overlap footer 2. How can I ensure that both footers stick to the bottom of the page without overlapping the copyright information?