HTML
<main id="page">
<article class="post">
<h1>Try to add and remove some paragraphs below</h1>
<h4>Maecenas nec pretium enim, ac fermentum velit. Cras convallis lectus nec lacus egestas molestie. Proin dictum, purus non pellentesque gravida, est purus pellentesque mi, vel ultrices neque orci vitae enim.</h4>
<p>Fusce non erat ante. Praesent quis tincidunt eros, sed mollis lacus. Praesent elementum quam non ligula tristique, ac semper quam molestie. Maecenas malesuada condimentum nunc, ac rutrum elit viverra et. Morbi mattis, urna non lobortis vulputate, ante tortor laoreet ex.</p>
<p>Fusce non erat ante. Praesent quis tincidunt eros, sed mollis lacus. Praesent elementum quam non ligula tristique, ac semper quam molestie. Maecenas malesuada condimentum nunc, ac rutrum elit viverra et. Morbi mattis, urna non lobortis vulputate, ante tortor laoreet ex.</p>
</article>
</main>
<footer>
<p>This is the footer and it's always at the bottom of the page... <strong>but not fixed!</strong></p>
</footer>
CSS
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
min-height: 100%;
background-color: #ededed;
font-family: 'Montserrat', Arial, sans-serif;
}
#page {
padding: 30px 0 130px;
}
.post {
width: 75%;
margin: 0 auto;
padding: 30px;
background-color: #fff;
}
.post h1 {
margin-top: 0;
}
.post p {
font-family: Georgia, serif;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
height: 100px;
line-height: 40px;
background-color: #F89406;
}
footer p {
text-align: center;
margin: 0;
}
