Geek asks and answers

CSS: getting the footer to the bottom of the page

Some of you guys will immediately come up with Ryan Fight's gooey footer, but the one I used and it didn't work correctly.

Scale the page using the “unlock” footer. Here is 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 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 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>
+5
source share
2 answers

The reason is position:absolute;, and float:left;in your classroom subtitles. As soon as the absolute positioning is removed and you clear the float, the problem will disappear. Depending on where you want the subtitles to appear, other options should be 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

+4
source

You can use this:

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

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

+4
source

More articles:


All Articles