So, I'm making a personal website, and I'm having a hard time creating a sticky footer. I want the footer to stay at the bottom of the page. Here's an example. By the way, I'm still very new to webpage design and development, so my practices are probably not the best!
html * {
font-size: 14pt !important;
font-family: 'Work Sans', sans-serif;
}
* {
margin: 0;
}
body {
height: 100%;
}
:root {
--theme: #6600da;
}
.row {
width: 100%;
height: 65%;
display: flex;
justify-content: center;
align-items: baseline;
/* border: 3px solid red; */
}
.navbar-image {
border-radius: 50%;
}
.column {
float: left;
border: 1px black solid;
padding: 5px;
margin: 5px;
/* position: relative; */
}
.left,
.right,
.middle {
display: inline-block;
margin: 2px;
top: 0;
text-align: center;
}
.left {
width: 25%;
font-size: 14pt !important;
}
.left img {
border-radius: 50%;
height: 15%;
width: 15%;
margin-left: 10px;
}
.header img {
padding-top: 5px;
float: left;
}
.header h3 {
text-decoration: underline;
}
.header h4 {
color: var(--theme);
font-weight: 100;
margin: 0px;
}
.header h3,
h4 {
margin: 0;
float: left;
padding-left: 15px;
}
.middle {
width: 45%;
}
.right {
width: 25%;
text-align: justify;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background: #222;
color: white;
text-align: center;
height: 60px;
clear: both;
}
.center {
padding-top: 15px;
}
.proj {
border: 1px black solid;
padding: 30px;
margin: 10px;
margin-top: 0;
}
.proj img {
width: 60px;
height: 60px;
border: 2px black solid;
display: inline-block;
}
.proj h3 {
text-decoration: underline;
margin: 0;
display: inline-block;
}
.proj p {
margin-top: 3px;
}
#footer-text {
color: #7d7d7d;
font-size: 10pt !important;
text-decoration: underline;
}
#footer-link {
color: #7d7d7d;
font-size: 10pt !important;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steve Tautonico</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include Google F -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<img class="navbar-brand navbar-image" src="pictures/stock.jpg" />
<a class="navbar-brand" href="#">Steve Tautonico</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">T.A.R.B.S. Engine</a></li>
<li><a href="#">Termutils</a></li>
<li><a href="#">SBS</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</nav>
<br /><br /><br />
<div class="row">
<div class="column left">
<div class="header">
<img src="pictures\stock.jpg" />
<br />
<h3>Steve Tautonico</h3>
<br />
<h4>CST Student, Developer, IT Technician</h4>
<br /><br />
<p>
Lorem ipsum dolor sit amet, consequat mauris condimentum amet, volutpat est diam purus, nunc sapien a felis magnam vel, tellus praesent urna accumsan, rutrum risus mollis. Urna iaculis sem sagittis volutpat massa facilisis, erat eget feugiat orci odio,
a consectetuer, pharetra sed. Mollis vel placerat maecenas. Est nascetur wisi purus quisque at ante, nec parturient at cras vel sed. Sodales vehicula amet, hymenaeos neque suspendisse.
</p>
</div>
</div>
<div class="column middle">
Lorem ipsum dolor sit amet, semper non dictum lobortis at pellentesque, rutrum et urna. Elit mauris vestibulum ad, hendrerit facilisis, donec libero, turpis id, curabitur arcu amet a dolor vulputate egestas. Wisi arcu mauris amet sit nullam auctor, tempus
nisl duis. Pede consequat phasellus fermentum laboriosam facilisi vehicula. Dolor donec, ut vulputate a suspendisse, ipsum ut sollicitudin justo aliquam venenatis, odio nam nulla ligula varius, tempor tellus et ante placerat. Mauris pede torquent,
tristique ut tempus, viverra laoreet. Purus litora ac sodales venenatis vitae, ante curabitur porttitor. Leo quis risus, est duis, metus tellus pretium libero a, adipiscing vestibulum, earum donec mattis. Libero lacus morbi vitae nec faucibus orci.
Sit erat, proin lorem duis. Sit libero semper turpis leo. Fames nostra luctus urna amet vitae sagittis, mauris velit leo nonummy ut, etiam vehicula nam nam morbi mauris. Justo convallis diam donec, sit nunc vitae integer, neque ipsum ut in, sed
cursus sollicitudin ante a. Nec dapibus penatibus sagittis lorem, sem ut, rutrum dignissim, ipsum justo. Tellus semper mi eget dapibus curabitur, eget duis. Ullamcorper feugiat, quae in eget, sem vitae sit nulla aliquam curabitur ante, diam mattis
ornare quis sed non wisi. In donec amet. Vestibulum leo a. Magnis tincidunt justo pharetra a aenean. Erat ipsum, leo nibh aliquam pede, mi pulvinar odio tortor molestie vero etiam, adipiscing donec class arcu, sem placerat et omnis. Vel felis donec,
maecenas tellus blandit convallis pharetra erat ac, rutrum eleifend tempor ultricies. Suspendisse nulla nisl commodo suscipit massa volutpat. Orci dolor urna neque, tempus penatibus proin sapien dictum ut placerat, est per sit turpis a. Duis gravida
in massa id, nascetur leo augue. Ante amet diam, condimentum aenean semper velit sed risus interdum, sem luctus imperdiet vestibulum fringilla. Quas suspendisse augue est metus malesuada magnis, suscipit a interdum, rutrum ipsum. Vitae consectetuer
ac ut lacinia pellentesque laoreet. Fames in libero porttitor, suspendisse luctus imperdiet ligula fermentum tincidunt, malesuada dolor vestibulum eget pretium, amet parturient cursus sed vel, eget neque dui purus per duis. Mattis enim dapibus,
fringilla justo lectus sapien mi primis, tincidunt fusce parturient sed et pellentesque, dapibus morbi condimentum, nec gravida feugiat ornare et fames ligula.
</div>
<div class="column right">
<br />
<div class="proj proj1">
<img src="pictures\stock.jpg" />
<h3>Project 1 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, integer orci odio ut. In faucibus vestibulum eget mollis dui, justo gravida. Maecenas et neque montes, ut wisi est odio placerat cursus.</p>
</div>
<br />
<div class="proj proj2">
<img src="pictures\stock.jpg" />
<h3>Project 2 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, viverra molestie justo urna eu lectus, justo vitae quam eu vitae lacinia, massa elementum nec platea eget quisque amet. Nunc ac elit. Ultricies suscipit phasellus turpis, a cursus donec nulla dignissim mi, ac vitae
gravida, neque odio sapien, eget velit sed ac pellentesque.</p>
</div>
<br />
<div class="proj proj3">
<img src="pictures\stock.jpg" />
<h3>Project 3 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, id turpis dui arcu urna bibendum, sit vitae pellentesque non sodales quam eros, laudantium est tempor nullam, sit suscipit nec erat ornare vivamus libero. Libero fermentum donec dolor nisl non, felis diam mus sed ac,
aliquet vitae risus facilisis purus cursus leo. Sed aliquam molestie odio vivamus, sit lorem id a sed ligula cras, volutpat volutpat dolor non velit, at ullamcorper euismod aliquet.</p>
</div>
<br />
<div class="proj proj4">
<img src="pictures\stock.jpg" />
<h3>Project 4 title</h3>
<br />
<p>Lorem ipsum dolor sit amet, quam tortor. Amet proin, ac risus nunc sodales urna ac bibendum. Id justo adipiscing morbi non potenti, massa ullamcorper mus urna commodo ultrices gravida, neque dui orci potenti maecenas.
</p>
</div>
<br />
</div>
<!-- Footer -->
<br /><br />
<div class="footer">
<div class="ml-auto center">
<span id="footer-text">Steve Tautonico</span>
<span>•</span>
<a href="#" id="footer-link">Projects</a>
<span>•</span>
<a href="#" id="footer-link">Contact Me</a>
</div>
</div>
</body>
</html>If you run this code, you can see that the footer sticks to the right side of the page. I tried using some examples from the internet, but the footer usually hovers somewhere near the middle of the page. The problem seemed to start when I added the third column. Once I started adding content and information into the third column (far right one), the footer broke. What am I doing wrong here?
