Menu
I am new to CSS and am trying to set up a page so that there is always a fixed margin / space between the page's main content (sidebar / sections) and the footer (e.g. 120px) which should work cross-browser.
Also, in case there is very little content on a page the footer should always appear at least at the bottom of the (visible) screen.
I made multiple attempts by applying a class footer, including the following, but the margin is always ignored.
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom
}
.footer:before {
clear: both;
display: block;
height: 120px;
min-height: 120px;
}<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
</html>Can someone help me with this?
Also, if anything should be changed regarding my HTML please let me know as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With