Despite extensive research on Google and Stack Overflow, I have been unable to find a solution to my HTML footer dilemma. Numerous questions exist regarding this issue, but the solutions provided either lack clarity or fail when additional elements are added to the page.
I am attempting to create a sticky footer that remains at the bottom of the document. My initial attempt using margin-top: 100px worked until more content was added, causing the footer to extend below the layout border. Switching to position: relative resulted in the footer being fixed in the middle of the page.
Below is my CSS code:
.box {
background-color: white ;
height: 800px ;
width: 600px ;
margin: 0px auto ;
border: 1px solid black ;
}
.header {
text-align: center ;
padding-left: 5px ;
}
.navigation {
text-align: center ;
font-size: 16px ;
font-family: verdana ;
}
.content {
font-size: 18px ;
font-family: verdana ;
padding-left: 10px ;
}
.contactForm {
font-size: 16px ;
font-family: verdana ;
}
.footer {
margin-top: 100px ;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}
Additionally, here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="testing.css" type="text/css">
</head>
<body bgcolor="#f6f6f6">
<div class="box">
<h3 class="header">My blog</h3>
<hr/>
<div class="navigation">
<a href="#">Home</a>
<a href="#">Posts</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<hr/>
<div class="content">
<form class="contactForm" action="#" method="post">
<table>
<tr><td>Contact</td></tr>
<tr><td>Name:</td><td><input type="text" name="name"></td></tr>
<tr><td>E-mail:</td><td><input type="text" name="email"><td></tr>
<tr><td>Message:</td><td><input type="textarea" name="message"></td></tr>
<tr><td><input type="submit" name="submit"></td></tr>
</table>
</form>
</div>
<div class="footer">
test
</div>
</body>
</html>
After reviewing various guides and articles with no success, I am frustrated and seeking assistance in creating an effective footer. Any explanations or guidance on positioning the footer correctly would be greatly appreciated.