Here, I would like to fix my footer at the below of the page. I cannot seem to do it for this page whereas the css codes for footer works well on the other pages. Again, I would like to place the footer fixed at the below of the page.
Need help on this.
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
@media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}<ul>
<li><a href="home.html">Home</a></li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
<a href="mainFrame.html">Conduct Study</a>
<a href="report.html">Reports</a>
</div>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<!--Product List for PCR Legacy-->
<br><br>
<!--End of first drop down list-->
</select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div>
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>
