I am working on creating a static web page within a larger Laravel project. Everything is functioning properly except for the footer which is displaying unusually. Despite being positioned at the bottom of the HTML structure, it is taking up more space and overlapping elements above it.
I have attempted to change the 'footer' div to a 'footer' or 'section' element without success.
Here is a snippet of my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head content -->
</head>
<body>
<div class="container-fluid">
<!-- Content sections -->
...
<div id='footer' class="row" style="background-color: grey; color: white;">
<div class="col-md-5 col-sm-5 col-xs-5 pull-left">
<p>Copyright © {{ date('Y') }} Website. All rights reserved </p>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-offset-1 col-sm-6 col-xs-6 pull-right">
<p>
Get social with us
<a href="https://www.facebook.com/" target="_blank"> Facebook </a>
<a href="https://www.youtube.com/" target="_blank"> YouTube </a>
<a href="https://in.linkedin.com/" target="_blank"> LinkedIn </a>
</p>
</div>
</div>
</div>
</body>
</html>
My CSS file :
#main-logo {
/* Logo styles */
}
/* Other CSS styles */
#footer {
background: grey;
color: white;
}
My JS file :
var sectionNumber = 2;
function toggleForm() {
// Function logic
}
toggleForm();
The expected behavior is for the footer to be displayed at the bottom of the page without overlapping other elements.
Expected Layout :
https://example.com/expected-layout.png
Current Layout :
https://example.com/current-layout.png
Thank you!