Floating footer

by suefeng

HTML

<div class="about">
    <div class="blurb">Stunning Imagery and resourceful imaging
    </div>
    <div class="article">
        <div id="container">
            <img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
        </div>
    </div>
    <div class="article-centre">
        <div id="container">
            <img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
        </div>
    </div>
    <div class="article-right">
        <div id="container">
            <img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
        </div>
    </div>
</div>
<footer class="footer">
    <div class="article"><span id="header">Contact Details</span>
    </div>
    <div class="article">
        <span id="header">Address</span>
    </div>
    <div class="article-centre">
        <span id="header">Mobile</span>&nbsp;&nbsp;&nbsp; <span>+44 (0)7377673765
        </span>
        <br/>
        <span id="header">Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <a href="mailto:nathaniel.mcmahon@gmail.com" target="blank">                                        nathaniel.mcmahon@gmail.com</a>
    </div>
    <div class="article-right"> Website and all images
        <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
    </div>
</footer>

CSS

* {
    margin: 0;
}

html,
body {
    height: 100%;
}


.footer,
{
    height: 140px;
    display: block;
    overflow: hidden;
    position: absolute;
    bottom:0;
}



p {

    font-family: HindRegular;
    font-size: 13px;
    font-weight: normal;
    display: block;
    margin-top: 1.5em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

.article {
    float: left;
    font-family: HindRegular;
    width: 21%;
    padding-right: 4%;
    color: #999;
}

.article-right {
    float: left;
    font-family: HindRegular;
    width: 21%;
    padding-left: 4%;
    color: #999;
}

.article-centre {
    float: left;
    font-family: HindRegular;
    width: 21%;
    padding-left: 2%;
    padding-right: 2%;
    color: #999;
}

.blurb {
    font-family: HindMedium;
    font-size: 24px;
    color: #999;
}

.about {
    font-family: HindMedium;
    font-size: 13px;
    min-width: 800px;
    text-align: left;
    width: 100%;
    overflow: hidden;
}

.heading {
    font-family: HindMedium;
    font-size: 24px;
    color: #666;
    margin-top: 1em;
}

.copyright {
    float: left;
}

.contact {
    float: right;
    font-family: HindRegular;
    color: #999;
}

#container {
    width: 100%;
}

#container img {
    width: 100%;
}

h8 {
    font-family: HindRegular;
    color: #999;
    padding-right: 5px;
    font-style: normal;
}

.footer {
    background-color: #FFF;
    height: 120px;
    width: 100%;
    border-top: 1px solid #ccc;
    padding-top: 1em;
}

a {
    border-bottom: 1px solid #219edf;
    padding: 0;
    margin: 0 0 2px 0;
    clear: both;
    color: #666;
    text-decoration: none;
    font-weight: normal;
    outline: none;
    transition: all .15s ease;
}

.services {
    width: 100%;
}

a:hover {
    text-decoration: none;
    color: #999;
    border-bottom: 1px solid #999;
}

#details {
    color: #666
}

#header {
    color: #999;
}

JavaScript

(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());