Menu
Some of you guys are going to immediately draw up Ryan Fait's sticky footer, but that's the one I've been using, and it has not been working out properly.
Zooming the page in and out "unsticks" the footer. Here's a live test case: http://jsfiddle.net/C2u3C/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Andrew Louis</title>
<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="about-me.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="javascript/jqueryscript.js"></script>
<body>
<br>
<h2>Andrew Louis</h2>
<div class="wrapper">
<div class="subtitle">
About Me
<div class = "subtitle-text">
<br> <!--Spacing between image and subtitle -->
<img align="center" src="images/Profile.jpg" /><br><br>
<p>Synth sriracha wes anderson blog etsy, pickled truffaut street art. Brooklyn wolf sriracha trust fund fap. Retro chillwave readymade master cleanse. Mixtape carles pop-up ennui, viral DIY freegan fingerstache post-ironic williamsburg organic hella single-origin coffee lomo you probably haven't heard of them. Pickled biodiesel vinyl flexitarian narwhal occupy fanny pack, butcher forage lo-fi marfa iphone wayfarers. Gastropub aesthetic brooklyn, mcsweeney's carles wayfarers pop-up viral wolf thundercats. Put a bird on it brunch direct trade dreamcatcher kale chips, before they sold out pour-over tofu chillwave fixie 8-bit flexitarian typewriter.</p>
<br><p> Words and stuff </p>
<br>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2012 Andrew Louis</p>
</div>
</body>
</head>
CSS:
/*The New Stuff Begins Here*/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
clear:both;
height: 100px; /* .push must be the same height as .footer */
}
.footer{
font-family: 'Lobster1.3Regular';
color:white;
text-align: center;
line-height: 25px;
background:#D04D21;
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
h2{
font-family:'WindsongRegular';
font-size:33px;
color:#D04D21;
text-align:center;
}
.subtitle{
float:left;
width:700px;
font-family:'Lobster1.3Regular';
text-shadow: 0 0 1px rgba(0,0,0,0.5);
color:#D04D21;
position: absolute;
font-size:60px;
top: 4%;
left: 0px;
height: 1px;
text-align:left;
margin-left:150px;
margin-right:50px;
}
.subtitle-text p{
text-align:left;
}
.subtitle-text{
border-right:2px solid;
padding-right:55px;
float:left;
border-right:2px solid rgba(0,0,0,0.2);
width:700px;
font-family:'MuseoSlab500Regular';
text-align:center;
/*margin-left:50px;
margin-right:50px;*/
font-size:20px;
color:#D04D21;
}
.subtitle-text img{
padding:3px;
border-top: 3px dashed #D04D21;/*#000000;*/
border-bottom:3px dashed #D04D21;/*#000000;*/
border-left:3px dashed #D04D21;/*#000000;*/
border-right:3px dashed #D04D21;/*#000000;*/
</html>
555
The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer. Since the footer is the only body child that has a display as table-row , it is rendered at the bottom of the page.
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
The cause is the position:absolute; and float:left; in your subtitle class. Once the absolute positioning is removed and you clear the float the problem goes away. Depending on where exactly you want the subtitle to show up, there should be other options available.
CSS:
.subtitle{
float:left;
width:700px;
font-family:'Lobster1.3Regular';
text-shadow: 0 0 1px rgba(0,0,0,0.5);
color:#D04D21;
text-align:left;
}
.footer, .push {
clear:both;
height: 100px; /* .push must be the same height as .footer */
}
Live DEMO
52
You can use this:
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
http://jsfiddle.net/C2u3C/2/
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
