I am currently working on creating a website with a footer menu. I have been using the container in my content to ensure proper alignment as I was unsure how to center it otherwise. However, when attempting to add the footer menu without using the container, I encountered an issue where the background color of the footer expanded upwards beyond the last div that did not have a container and the text would not align properly.
The layout appears distorted after applying .mainbar:float:left; and .sidebar:float:right;.
HTML
<div class="container" id="content">
<div class="mainbar">
<img src="img/img2.png"><br>
<h4>Sample text.</h4>
</div>
<div class="sidebar">
<a href="#"><img src="img/banner.png"></a><br>
<a href="#"><img src="img/banner.png"></a>
</div>
</div>
<footer>
<div id="fnav"">
<ul>
<li class="fmenu-item"><a href="#">HOME</a></li>
<li class="fmenu-item"><a href="#">Company Info</a></li>
<li class="fmenu-item"><a href="#">Product Info</a></li>
<li class="fmenu-item"><a href="#">Career Opportunities</a></li>
<li class="fmenu-item"><a href="#">News</a></li>
<li class="fmenu-item"><a href="#">Support</a></li>
<li class="fmenu-item"><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="copyright">
COPYRIGHT © SAMPLE Template .ALL RIGHTS RESERVED.
</div>
</div>
</footer>
CSS
#content .mainbar{
float: left;
width: 736px;
}
.sidebar{
float: right;
width: 214px;
}
#fnav{
font-size: 14px;
margin-bottom: 10px;
text-align: center;
background: #eee;
}
#fnav ul{
display: flex;
list-style: none;
margin: auto;
width: 1000px;
}
#fnav ul li.fmenu-item {
flex-grow: 1;
padding: 10px 0 10px 0;
}
#fnav ul li.fmenu-item a{
color: #262d33;
text-decoration: none;
}
.copyright{
font-size:10px;
color:#444;
text-align:center;
position: relative;
margin-bottom: 10px;
letter-spacing: 0.1em;
}