I've encountered a strange issue that I can't seem to figure out. Simply removing the <h2> tags in my code causes the footer to move to the top instead of the bottom. Oddly enough, the footer works perfectly when there is a title, but as soon as I remove it, everything goes haywire.
Take a look at my code below:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Bootstrap -->
<link href="inc/bootstrap.css" media="screen" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
CSS
<style type="text/css">
#under-header {
height: 250px;
}
#screenshot {
margin-top: -150px;
text-align: center;
}
#features {
height: 200px;
}
#margin-50 {
margin-top: 50px;
}
#margin-100 {
margin-top: 50px;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
</style>
</head>
HTML
<body>
<div class="container-fluid">
<div id="wrap">
<div class="row-fluid">
<div class="col-md-10 col-md-offset-1" id="margin-100">
<h2>Title</h2>
<div class="well"></div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well"></div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well"></div>
</div>
<div class="col-md-10 col-md-offset-1">
<h2>Title</h2>
<div class="well text-center">
<p></p>
<a class="btn btn-primary" href="#">Link</a>
</div>
</div>
</div>
<div id="push"></div>
</div></div>
<footer id="footer">
<div class="row-fluid">
<h2>THIS IS IMPORTANT FOR THE FOOTER</h2>
<div class="well text-center">
<p></p>
</div>
</div>
</footer>
</body>
</html>