Another question on the same topic, with a twist. Despite trying various solutions found in countless articles, none seem to work for me. My familiarity with HTML/CSS is limited due to just a few months of off-and-on practice. Hence, I'm seeking help from someone knowledgeable who can guide me through this dilemma.
The blog layout I'm creating appears almost perfect except for the stubborn footer. It refuses to stick to the bottom. Instead, it hovers in the middle of the page's content. Ideally, I want a footer that anchors itself at the bottom and only displays when the content is minimal, akin to the layout seen on this website. Achieving this without resorting to 'position:fixed' has been my goal, but so far, I've hit roadblocks. As an amateur in web development, I feel lost in understanding what's going wrong.
I've included snippets of my current code, though they have been modified several times following different tutorials—none yielding the desired outcome.
If there are other errors or oversights unrelated to the sticky footer conundrum, experienced eyes spotting them would be immensely helpful in guiding me towards rectifying those mistakes. Any assistance provided will be greatly appreciated as I strive to learn the correct methods.
Thank you!
<body>
<div id="outer">
<div id="header">
<div id="wrap">
<div class="logo"><a href="#"><img src="images/logo.png" /></a></div>
</div>
</div>
<div id="wrap">
<div id="content">
<div class="featured_title"><a href="#">Example Title One</a></div>
...
</div>
</div>
<div id="wrap">
<div id="sidebar">
<div class="job_search">
<a href=#"><img src="images/job_search.png" /></a>
</div>
...
</div>
</div>
<div id="footer">
</div>
</div>
</body>
And here's the accompanying CSS:
html {
height:100%;
padding:0;
height:100%;
}
body {
margin: 0 0 40px;
background: #f4f4f4;
height:100%;
}
#wrap {
margin: 0 auto;
width: 940px;
}
/* Header */
...
/* Sidebar */
...
.job_search {
padding-bottom:20px;
}
/* Footer */
#footer {
clear:both;
bottom:0;
background:#000;
width:100%;
height:35px;
margin-top: -100px;
position:relative;
}
.footer_content {
font-family:helvetica, sans-serif;
color: #68acc2;
}