I currently have a bottom div at the footer of my webpage. It features a background image and another div called bottomnav, which contains an unordered list for navigation.
However, when I try to change the position of bottomnav to absolute, the entire bottom div shifts up into the div above it. Interestingly, I have a separate div named cc that I can change to absolute without encountering any issues.
Here is my code snippet:
html
<div id="bottom">
<div id="bottomnav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="cc">©2014 European Homemakers</div>
And here is the corresponding CSS:
#bottom {
background-image: url(../Images/home_bottom.png);
width: 960px;
margin-left: auto;
margin-right: auto;
min-height: 100px;
background-repeat: no-repeat;
position: relative;
}
#bottomnav {
font-size: 20px;
}
#bottomnav ul {
list-style-type: none;
height: auto;
}
#bottomnav li {
display: inline;
padding: 20px;
}
#bottomnav a {
text-decoration: none;
color: #FF9200;
}
#cc {
text-align: right;
color: #FF9200;
position: absolute;
bottom: 5px;
right: 5px;
font-size: 20px;
}
I am relatively new to web design, so I am unsure why changing the position of bottomnav to absolute impacts the layout in this way.