CODEWITHSUNDEEP
htmlcss
Louis93
Louis93

Reputation: 3913

CSS: Getting the footer to stick to the bottom of a page

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>

Upvotes: 5

Views: 1265

Answers (2)

Josh Mein
Josh Mein

Reputation: 28625

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

Upvotes: 4

bfavaretto
bfavaretto

Reputation: 71908

You can use this:

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

http://jsfiddle.net/C2u3C/2/

Upvotes: 4

Related Questions