CODEWITHSUNDEEP
htmlcss
Leonard Labita
Leonard Labita

Reputation: 77

Creating a footer that stays at the bottom of the page

I have went through countless methods on the previously answered questions. I believe I followed this one (http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/) to the t but I still cannot get my footer to stay at the bottom of the page. I know this has been asked countless times but I don't where to adjust my code. Any help with this would be appreciated.

Here is my code:

HTML

<body>
    <div id="wrapper">
        <header>
            <div class="logo"><a href="index.html"><img src="http://i.imgur.com/eWLyoIY.png"/></a></div>
            <div class="chapter-logo"><a><img src="http://i.imgur.com/RPIvgdD.png"/></a></div>
        </header>
        <nav>
            <ul class="menu">
                <li><a href="index.html">Home</a>

                <li class="dropdown"><a href="">About ▾</a>
                    <ul class = "sub-menu">
                        <li><a href="history.html">History</a>
                        </li>
                        <li><a href="brothers.html">Brothers</a>
                        </li>
                    </ul>
                <li class = "dropdown"><a href="">Philanthropy ▾</a>
                    <ul class="sub-menu">
                        <li><a href="kovacs.html">Kovacs Color Run</a>
                        </li>
                        <li><a href="greekgod.html">Greek God</a>
                        </li>
                    </ul>

                <li><a href="membership.html">Membership</a>
                <li><a href="contact.html">Contact</a>

            </ul>
        </nav>


<div class="index">
    <div class ="letter">
        <p><b><br>Welcome to the official website for the New York Iota chapter of Phi Kappa Psi at Binghamton 

University! Here you will be able to learn about us, and get a brief introduction to Greek Life at 

Binghamton. If you have any questions or simply want to learn more information, feel free contact us at 

any time.</b></br> 

        <br><b><font color ="#22674A">Carl Hashem (Chapter President)</b></font></br>
    </div>
</div>
<div class = "news-section">
<table class ="news">
    <tr>
    <td class ="social">
        <h4 align="center">Connect</h4>
        <a href ="http://instagram.com/phipsibing"><img src="http://i.imgur.com/1GhbSOj.png"/></a>
        <a href="https://twitter.com/phi_psi_bing"><img src="http://i.imgur.com/oawoJtC.png"/></a>
        <a href="https://www.facebook.com/phipsi.sociallist?fref=ts"><img src="http://i.imgur.com/2dAtAX3.png"/></a>
    </td>

    <td class = "greekgod">
        <h4 align = "center">Greek God</h4>
        <p align="center">On October 18th 2014, brother Anthony Leighton will be representing us in this years Greek God competition. All proceeds go to the Elizabeth Glazier Pediatric Aids Foundation.</p>

        <a href="https://www.payitsquare.com/collect-page/46106"><div class="donate-button">
        <p>Donate!</p>
        </div></a>

    </td>

    <td class = "kovacs">
        <h4 align="center">Kovacs Color Run</h4>
        <p align="center">The 5th Annual Steve Kovacs Color Run will take place on October 19th 2014. All proceeds are split between the Fairview Recovery Center and Childhood Development Center.</p>
        <a href="https://www.payitsquare.com/collect-page/41430"><div class="sign-up">
        <p>Sign Up!</p>
        </div></a>
    </td>
</tr>
</table>
</div>
    <div class = "footer">
        <p>© Phi Kappa Psi NY Iota Chapter. All Rights Reserved.</p>
    </div> 
</div>
</body>

CSS

html {
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    min-width:1000px;
    min-height:100%;
    position:relative;
}
body {
    margin:0;
    padding:0;
    height:100%;
}

header {
    height:100px;
    width:100%;
    background:black;
    margin:0 auto;

}

.logo{
    padding-left:10px;
    float:left;
    padding-top:5px;
}

.chapter-logo {
    float:right;
    padding-top:15px;
    padding-right:10px;
}

/* Start MENU styling*/

.menu{
    margin:0 auto;
    padding:0 ;
    text-align:center;
    clear:both
}

ul.menu {
    background-image: -o-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -moz-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -webkit-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -ms-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: linear-gradient(to bottom, #ACB5B5 0%, #E2F0EA 100%);
    height: 40px;
    width: 100%;
    border-left:solid 1px #22674A;
    white-space: nowrap;
    text-align:center;
}

ul.menu > li {
    position: relative;
    display:inline-block;
    list-style:none;
    text-align:center;
    width:20%;
    border-style:1px #22674A;
    font-family: "Open Sans", sans-serif;
    font-weight:700;
}

/*sub menu styling*/

ul.menu li:first-child a {
    border-left:none;
}

ul.menu ul li:first-child {
    border-bottom:solid 1px #22674A;
}

ul.menu ul li:nth-child(2) {
    border-bottom:solid 1px #22674A;
}

ul.menu ul li:last-child{
    border-bottom:none;
}

ul.menu ul li a {
    border:none;
}
ul.menu ul {
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    position: absolute;
    padding:0;
    border-left:none;
    border:solid 1px #22674A;
    width:100%;
    text-align:center;
    display:none;

}
ul.menu a {
    cursor: pointer;
    display: block;
    color: #22674A;
    line-height: 40px;
    text-decoration:none;
    font-weight:bold;
    border-left:solid 1px #22674A; 
}
ul.menu li {
    list-style: none;
}

/* End MENU styling */
/* Banner Styling*/
.index {
    height:400px;
    background-image: url("http://i.imgur.com/RI05og7.jpg");
    background-repeat:no-repeat;
    background-size:100% 400px;
}

.letter{
    width:460px;
    height:250px;
    margin-left:20px;
    line-height:1.75em;
    font-family:"Open Sans", sans-serif
}

h4 {
    color:#22674A;
    font-family:"Open Sans", sans-serif;
    font-weight:700;
}

/*End of Banner Styling*/

/*News Styling*/

.news {
    width:1000px;
}

.news-section {
    padding-bottom:50px;
}
.greekgod {
    width:300px;
    height:220px;
    border:solid 1px black;
    text-align:center;
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    padding:5px 5px 5px 5px;
    line-height:1.5em;
    font-family:"Open Sans", sans-serif;
    float:left;
    margin-right:30px;
}

.donate-button {
    width:150px;
    height:40px;
    border:3px solid black;
    background:#22674A;
    border-radius:5px;
    color:white;
    text-align:center;
    padding-top:7px;
    text-decoration:none;
    margin-left:65px;
    margin-bottom:10px;
    font-family:"Open Sans", sans-serif
}

.kovacs {
    width:300px;
    height:220px;
    border:solid 1px black;
    float:left;
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    text-align:center;
    margin: 0 auto;
    line-height:1.5em;
    padding:5px;
    padding-bottom:10px;
    font-family:"Open Sans", sans-serif
}

.sign-up {
    width:150px;
    height:40px;
    border:3px solid black;
    background:#22674A;
    border-radius:5px;
    color:white;
    text-align:center;
    padding-top:7px;
    text-decoration:none;
    margin-left:65px;
    font-family:"Open Sans", sans-serif
}

.social{
    float:left;
    border:solid 1px black;
    position:relative;
    text-align:center;
    width:300px;
    height:220px;
    margin-right:30px;
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    padding:5px;
    font-family:"Open Sans", sans-serif

}

.social a {
    padding:20px;
}

.social h4 {
    padding-bottom:20px;
    padding-top:none;

}

.footer {
height:50px;
width:100%;
position:absolute;
background-color:black;
bottom:0;
left:0;
}

.footer p {
    text-align:center;
    color:white;
    font-size:13px;
    font-family:"Open Sans", sans-serif;
    padding-top:15px;
}

FIDDLE

http://jsfiddle.net/18468f07/

Upvotes: 1

Views: 108

Answers (2)

Luigi
Luigi

Reputation: 11

You could add bottom padding to the #wrapper element so the padding would contain the height of the footer and some space between the upper elements. That's if you don't want to change the current structure.

Upvotes: 0

andrex
andrex

Reputation: 1032

Try changing your layout I inspected it and that might have caused it. Try this instead, just move the footer div outside of the wrapper div so that they would be on the same label

You can also use position: fixed to make it stick there is you want.

<div id="wrapper">
</div>
<div class = "footer">
          <p>© Phi Kappa Psi NY Iota Chapter. All Rights     Reserved.</p>
</div>

And in the css

Div#wrapper {
margin-bottom: 50px;
}

That should solve it.

Sorry can't format using mobile here.

Upvotes: 1

Related Questions